我在我的 Angular 应用程序中使用 Angular ui-router。对于我编写的路由部分
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html',
controller : function($scope,$state){
$scope.$on('$viewContentLoaded', function(){
console.log("home content loaded",$state.current);
})
}
})
// nested list with custom controller
.state('home.list', {
url: '/list',
template: 'I am using a list.'
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
});
在partial-home.html中我写了:-
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
现在,当我在浏览器中执行此应用程序时,如果我打开路线
/home
浏览器控制台显示“主页内容已加载”一次,然后如果我单击列表链接,地址栏将更改为
/home/list
然后控制台也会显示一次。
但是如果我当时刷新浏览器选项卡(当路由为 home/list 时),控制台会显示两次。请帮助我解释为什么会发生这种情况。
最佳答案
这些是嵌套 View 。重新加载后控制台中出现两条消息的原因是: 当您从/home 启动时,会加载主状态。当你去那里的/home/list 时,只需要加载 home.list 因为 home 状态已经加载了。当您重新加载时,需要加载两个状态:home 和 home.list。
编辑:我没有足够的声誉,所以我无法发表评论。我猜您在主模板中使用 ui-view 会导致子级和父级共享相同的范围。您正在聆听 child 和家长对事件的范围。所以被调用两次是很自然的
关于javascript - Angular ui-router加载 View 两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27621736/