状态参数更改时更新ui-router视图的正确方法是什么?
例如,如果我的状态如下:
.state("page.view", {
url: "/pages/:slug",
views: {
"": {
controller: "PageCtrl",
templateUrl: "page-view.html",
},
},
})
一个(不正确的)控制器看起来像这样:
.controller("PageCtrl", function($scope, $state) {
$scope.page = loadPageFromSlug($state.params.slug);
})
如果$scope.page
发生变化,我如何正确加载新的$state.slug
?
注意以上在从一个页面移动到另一个页面时不起作用,因为控制器仅在第一页加载时运行一次。
答案 0 :(得分:10)
我会做这样的事情:
.controller("PageCtrl", function($scope, $state) {
$scope.$on("$stateChangeSuccess", function updatePage() {
$scope.page = $state.params.slug;
});
});
如果你找到一个更好的方法,我会很好奇 - 可能有一些方法只能看到状态slug的价值,但这很干净,清楚地表达了你正在观察的内容。
答案 1 :(得分:2)
我真的不完全确定,如果我不想错过这里的内容 - 但是,根据你问题中显示的片段:
PageCtrl
与州“page.view”相关,并且将多次运行“page.view”状态被触发"page.view"
州声明了param slug - url: "/pages/:slug",
,这将触发状态更改 - 无论何时更改$state.params
。我们可以使用$stateParams
(我个人说的更多UI-Router方式)如果所有这些都是正确的,如this working plunker所示,我们就可以这样做
分解器:
var slugResolver = ['$stateParams', '$http'
, function resolveSlug($stateParams, $http){
return $http
.get("slugs.json")
.then(function(response){
var index = $stateParams.slug;
return response.data[index];
});
}];
调整后的状态def:
.state("page.view", {
url: "/pages/:slug",
views: {
"": {
controller: "PageCtrl",
templateUrl: "page-view.html",
resolve: { slug : slugResolver },
},
},
})
和PageCtrl:
.controller('PageCtrl', function($scope,slug) {
$scope.slug = slug;
})
全面检查here
答案 2 :(得分:1)
我在ui-router 0.2.14中遇到过这个问题。升级到0.2.18后,参数更改会触发预期的$stateChange*
事件。