状态参数更改时刷新ui-router视图?

时间:2014-11-26 21:01:33

标签: angularjs angular-ui-router

状态参数更改时更新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

注意以上在从一个页面移动到另一个页面时不起作用,因为控制器仅在第一页加载时运行一次。

3 个答案:

答案 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",,这将触发状态更改 - 无论何时更改
  • 如果上述情况属实(如果我不监督某事),我们可以使用stateConfig设置 - resolve
  • 无需使用$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*事件。