当孩子状态改变时重新加载控制器 - Angular UI路由器
问题描述:
我是Angular UI路由器的新手,并且尝试使用嵌套视图创建应用程序。当孩子状态改变时重新加载控制器 - Angular UI路由器
我有一个index.html托管'标题'状态和'内容'状态。在内容状态中,我有两个代表全局视图和子视图的导航栏。当用户打开应用程序时,全局视图应默认打开。但是,目前,无论何时运行应用程序,全局视图控制器和子视图控制器都会一起执行(两个视图都会一起加载)。
我所希望的是,只有全局控制器应该首先被执行,然后当用户点击子视图时,其控制器应该被执行。在此之后,无论用户何时在两个视图之间切换,控制器都应重新加载。
我一直在阅读谷歌和这里,但无法找到所需的解决方案。请让我知道如果这是可能的使用ui路由器。谢谢。
的index.html
<html>
<body>
<div class="fluid-container">
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
</body>
</html>
content.html
<div class="row" style="background-color: #F9F9F8">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" href="#globalView">Global</a></li>
<li><a data-toggle="pill" href="#subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div>
<div id="subAccountView" class="tab-pane fade" ui-view="subView"></div>
</div>
</div>
app.js
$urlRouterProvider.otherwise("/firstPage");
$urlRouterProvider.when('', '/firstPage');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.summary', {
url: '/firstPage',
views: {
'globalView': {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl"
},
'subView': {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl"
}
}
});
答
我发现soluti在评论中通过Weedoze提供的教程进行查询。以下是更新的文件。
index.html保持与上述相同。
content.html
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a ui-sref=".globalView">Global</a></li>
<li><a ui-sref=".subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div class="tab-pane fade in active" ui-view></div>
</div>
</div>
这里要补充的一点是,我是稍早在我的锚标记数据切换=“丸”,这是导致两个子视图之间进行导航的问题。进一步挖掘之后,我发现如果删除此切换,导航工作将顺利进行。
app.js
$urlRouterProvider.otherwise("/globalView");
$urlRouterProvider.when('', '/globalView');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.globalView', {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl",
url: '/globalView'
})
.state('home.subView', {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl",
url: '/subView'
});
此代码让我的两个子视图,每当我在视图之间切换,控制器得到重新加载之间进行切换。
查看本教程https://scotch.io/tutorials/angular-routing-using-ui-router – Weedoze
感谢Weedoze。本教程相当有帮助。我已在下面发布我的答案。 –
没问题雅什,这是一种享受:) – Weedoze