我有一个复杂的ui.state设置,为了方便用户,我将用户带到“基本”子页面网址,然后提供标签来过滤页面上的内容。例如:
/page/unique-page-slug
< --'base'ubspage url
/page/unique-page-slug/popular
< - 已过滤的内容子页面网址
我遇到的问题是,尽管每个州都有一个控制器,但是当状态在第一次发生变化后似乎无法触发。
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
controller: function($scope){
console.log('parent triggered');
}
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
console.log('child triggered');
}
})
})
Heres是plunkr的例子。请注意,当我进入路线1时,它记录'父触发',然后进入子状态我得到'儿童触发',当我回到父母我没有得到任何触发,但重新进入子状态它重新触发'儿童国家'
我想要做的是当我回到父状态时触发'父触发'。
答案 0 :(得分:1)
一个选项是您可以创建一个shell控制器,并使用.transitionTo
并设置{ reload: true }
?
<强>标记
<div class="navbar" ng-controller="shell">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a href="#" ng-click="go('route1')">Route 1</a></li>
</ul>
</div>
</div>
<强>控制器
.controller('shell', ['$state','$scope',function($state, $scope) {
$scope.go = function(route) {
$state.transitionTo(route, { param1 : 'something' }, { reload: true });
}
}]);
更新示例: http://plnkr.co/edit/J8Y02IBeExNMVUi9y7Cx?p=preview
说实话,在阅读这个问题之前,我并没有意识到.transitionTo
。但我在github角度论坛上发现了它here
我认为最初的问题是,当你去一条子路线时,你永远不会真正从route1过渡。因此,除非您执行某些操作以明确重新运行它,否则控制器代码不会重新绑定。在这种情况下,强制重新加载。