Javascript 如何通过角度ui路由器在ons导航器内设置ons滑动菜单？_Javascript_Angularjs_Angular Ui Router_Onsen Ui

Javascript 如何通过角度ui路由器在ons导航器内设置ons滑动菜单？

javascript angularjs

Javascript 如何通过角度ui路由器在ons导航器内设置ons滑动菜单？,javascript,angularjs,angular-ui-router,onsen-ui,Javascript,Angularjs,Angular Ui Router,Onsen Ui,我想通过angular ui router在ons navigator中加载ons滑动菜单，但它不工作。请看一下我下面的代码，我哪里做错了，为什么会这样，它在控制台中没有显示任何错误，也没有工作。非常感谢你的帮助角度：- var app = angular.module('myApp', ['onsen', 'ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvi

我想通过

angular ui router

在

ons navigator

中加载

ons滑动菜单

，但它不工作。请看一下我下面的代码，我哪里做错了，为什么会这样，它在控制台中没有显示任何错误，也没有工作。非常感谢你的帮助

角度：-

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');
            }]
        })
    ;

});

<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>

HTML:-

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');
            }]
        })
    ;

});

<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路由器似乎无法工作。将下一个哑div添加到

index.html

中可以使其正常工作

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

它所指向的状态并不重要，只要它存在。老实说，我不知道原因，但它与这个解决办法

顺便说一下，添加一个

ons页面

包装您的

ons滑动菜单

，否则导航器会对您大喊大叫

希望有帮助