angularjs – Angular Router中具有嵌套状态的后退按钮
发布时间:2020-12-17 07:12:09 所属栏目:安全 来源:网络整理
导读:我有一个AngularJS应用程序,它使用新的,基于状态的 ui-router.我的应用程序中有三个不同的视图,其中一个是顶级视图,另外两个是嵌套视图. 结构基本如下: / = Top-level view/foo = Abstract view,loads a view that contains a ui-view placeholder/foo/bar
我有一个AngularJS应用程序,它使用新的,基于状态的
ui-router.我的应用程序中有三个不同的视图,其中一个是顶级视图,另外两个是嵌套视图.
结构基本如下: / => Top-level view /foo => Abstract view,loads a view that contains a ui-view placeholder /foo/bar => View for the placeholder /foo/baz => View for the placeholder 路由器设置如下: app.config(['$urlRouterProvider','$stateProvider',function ($urlRouterProvider,$stateProvider) { 'use strict'; $urlRouterProvider .when('/bar','/foo/bar') .otherwise('/'); $stateProvider .state('home',{ url: '/',views: { '': { controller: 'homeController',templateUrl: '/home/homeLayout.html',},'firstHomeView@home': { templateUrl: '/home/firstHomeView.html' },'secondHomeView@home': { templateUrl: '/homme/secondHomeView.html' } } }) .state('foo',{ abstract: true,templateUrl: '/foo/fooLayout.html',controller: 'fooController' }) .state('foo.bar',{ url: '/foo/bar',templateUrl: '/foo/barView.html',controller: 'barController' }) .state('foo.baz',{ url: '/foo/baz',templateUrl: '/foo/bazView.html',controller: 'bazController' }); 问题是,当你点击或手动输入网址时,基本上一切都按预期工作,但是当使用浏览器的后退/前进按钮时它不起作用. 例如,你去/ foo,你被带到/ foo / bar,正如预期的那样.当你点击链接转到/ foo / baz时,一切都很好.然后单击一个链接,将您带到/,一切都很好. 如果你现在点击后退按钮,你将被带回/ foo / baz(这是正确的),但只渲染/foo/fooLayout.html视图,而不是它的子视图/foo/bazView.html.奇怪的是,如果你再次点击后退按钮,你将被带到/ foo / bar并且它正确呈现,包括它的子视图!看起来好像在使用后退按钮时无法识别嵌套视图,至少如果您同时输入抽象视图. $locationProvider.html5Mode未启用,但启用它没有任何区别. 我使用的是AngularJS 1.0.5和ui-router 0.0.1-2013-03-20. 什么可能导致这个问题的想法,以及我如何解决它? 解决方法
我发现错误:在视图fooLayout.html中我使用的是ng-view而不是ui-view.一旦我改变了,一切都很好:-)
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |