如何通过Angular ui-router在on -navigator中设置滑动菜单

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

本文关键字：设置 菜单 -navigator on 何通过 Angular ui-router      更新时间：2023-09-26

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

角:- 

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>

如果index.html中没有ui-sref，看起来ui-router不工作。将下一个哑div添加到index.html使其工作。

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

只要它存在，它指向的状态无关紧要。老实说，我不知道原因，但它可以与这个解决方案。

顺便说一下，添加一个ons-page包裹你的ons-sliding-menu，否则导航器会对你大喊大叫。

希望有帮助!

相关文章：