gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:21:02 24 4
gpt4 key购买 nike

我想通过 angular ui-routerons-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>

最佳答案

如果 index.html 中没有 ui-sref,则 ui-router 似乎无法正常工作。将下一个哑 div 添加到您的 index.html 使其工作。

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

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

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

希望对您有所帮助!

关于javascript - 如何通过 Angular ui-router 在 ons-navigator 中设置 ons-sliding-menu?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33165594/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com