javascript - 如何从父状态的嵌套状态访问参数？

Question

我有一个例子here .我如何访问父状态 Controller 中的“itemId”参数？不得重新加载父 View 。

angular.module('app',['ui.router'])
.config(function($stateProvider){
   $stateProvider.state('step', {
            url: '/orders/:step',
            templateUrl: 'parent.html',
            controller: function ($scope, $stateParams) {
                $scope.itemId = $stateParams.itemId;
                $scope.step = $stateParams.step;
            }
        })

        .state('step.item', {
            url: '/:itemId',
            templateUrl: 'child.html',
            controller: function ($scope, $stateParams) {
                $scope.itemId = $stateParams.itemId;
                $scope.step = $stateParams.step;
            }

        });
}).controller('SimpleController', function($scope, $state){
  $scope.items = [1,2,3,4,5,6];
  $scope.steps = ["first", "second"];
})

我只看到两种方式:

1. 添加服务并将其注入(inject)两个 Controller
2. 从子 Controller 访问父作用域并传递参数
   
   但两者都让我在父范围内添加观察者。也许我可以更轻松地完成它？

Answer 1

首先，您需要认识到，当您进入其子状态的子树时，父状态的 Controller 仅运行一次，因此在其子状态之间切换不会重新运行 Controller 。

这就是说，如果您希望 itemId 参数始终是最新的，您需要一个 $watch(您试图避免)。

第一次，您可以像这样在父级状态下收集 itemId:

$scope.itemId = $state.params.itemId;

如果你需要它保持最新，那么你需要观察变化，例如:

$scope.$watch(function(){
  return $state.params;
}, function(p){
  $scope.itemId = p.itemId;
});

plunker

同理，如果只需要放在 View 中，那么在作用域上设置$state:

$scope.$state = $state;

在 View 中:

<div>parent /orders/{{step}}/{{$state.params.itemId}}</div>

编辑:

我想另一种方法是在父对象上调用作用域公开函数来更新值。我不喜欢这种方法，因为它依赖于范围继承(这并不总是与状态继承相同)并且大型应用程序中的范围继承很难跟踪。但它消除了对 $watch 的需要:

在父 Controller 中:

$scope.updateItemId = function(itemId){
   $scope.itemId = itemId;
};

在子 Controller 中:

if ($scope.updateItemId) $scope.updateItemId($stateParams.itemId)