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

Question

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

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-如果 index.html 中没有 ui-sref，路由器将无法正常工作。将下一个哑巴 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？

How to set ons-sliding-menu inside ons-navigator via Angular ui-router?

javascript

angularjs

angular-ui-router

onsen-ui