Question

我想通过ons-sliding-menu在ons-navigator内加载angular ui-router，但它不起作用。请查看我的下面的代码，我做错了，为什么会发生这种情况，既没有显示控制台中的任何错误也没有显示它的工作情况。非常感谢您的帮助。

Angular： -

var app = angular.module('myApp', ['onsen', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/slider');

    $stateProvider      
        .state('navigator', {
            abstract: true,
            url: '/navigator'
        })
        .state('navigator.slider', {
            parent: 'navigator',
            url: '/slider',
            onEnter: ['$rootScope', function($rootScope) {
                $rootScope.myNavigator.resetToPage('html/slider.html');
            }]
        })
    ;

});

HTML： -

<body ng-app="myApp">
    <ons-navigator title="Navigator" var="myNavigator"></ons-navigator>

    <ons-template id="html/slider.html">
        <ons-sliding-menu menu-page="html/menu.html" 
                          side="left" 
                          main-page="html/main.html" 
                          var="myMenu" type="reveal" 
                          max-slide-distance="260px" 
                          swipeable="true">
        </ons-sliding-menu>
    </ons-template>
</body>

Answer 1

如果ui-sref中没有index.html，ui-router似乎无效。将下一个哑哑div添加到index.html可以使其正常工作。

<div style="height: 0; width: 0" ui-sref="navigator"></div>

只要它存在，它指向的状态并不重要。说实话，我不知道原因，但它适用于这种解决方法。

顺便说一句，添加ons-page包裹你的ons-sliding-menu或导航员会对你大喊大叫。

希望它有所帮助！

如何通过Angular ui-router在ons-navigator中设置ons-sliding-menu？

1 个答案: