为什么在 ui-router 状态数据在父节点上更改时观察者不触发？

Question

从父视图更新 $state.current.data 时，我无法触发 $scope.$watch 或 $scope.$watchCollection。

我创建了一个 plunker 来演示：http://plnkr.co/edit/d4hblq9QvnMOLQKxO9jc?p=preview 要使用，导航到 /main/1 路径并单击 'change' 按钮。您会看到 $state.data 得到更新，但观察者永远不会收到通知。

这是 script.js 来源：

var app = angular
  .module('MyApp', [
    'ui.router'
  ])
  .config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/main');
      $stateProvider
      // States
       .state("main", {
          data: {hello:'hello'},
          controller:'mainController',
          url:"/main",
          templateUrl: "main_init.html"
        })  
      .state("main.1", {
        controller:'childController',
        parent: 'main',
        url:"/1",
        templateUrl: 'form_1.html'
    })  
  }])
  .controller('mainController', function ($scope, $state, $timeout) {
    $scope.Model = $scope.Model || {Name : "xxx"};
    $scope.changeHello = function changeHello(){
      console.log('about to change...');
      $timeout(function(){
        $state.current.data.hello = 'hi';
        console.log('changed.');
      },3500);
    }
  })
.controller('childController', function($scope, $state, $timeout){
  $scope.changeStatus = 'nothing yet';
  $scope.$watch($state.$current.data.hello, function(newObj){
    if(newObj){
      console.log('changed');
      $scope.changeStatus = 'changed via watch';
    }
  });
  $scope.$watchCollection($state.$current.data, function(newObj){
    if(newObj){
      console.log('changed');
      $scope.changeStatus = 'changed via watchcollection';
    }
  });
  $scope.$watchCollection($state.$current, function(newObj){
    if(newObj){
      console.log('changed');
      $scope.changeStatus = 'changed via watchcollection $current';
    }
  });
  $scope.$watchCollection($state.current, function(newObj){
    if(newObj){
      console.log('changed');
      $scope.changeStatus = 'changed via watchcollection current';
    }
  });
})
app.run(
    ['$rootScope', '$state', '$stateParams',
      function ($rootScope, $state, $stateParams) {
          $rootScope.$state = $state;
          $rootScope.$stateParams = $stateParams;
      }
    ])

Answer 1

$watch 正在寻找作为变量 $state.current.data.hello 值的事件。这是它正在做的事情：

$scope.$watch('hello', function(newObj)...

将您的变量放在引号中，$watch 将按预期工作：

$scope.$watch('$state.current.data.hello', function(newObj)...

为什么在 ui-router 状态数据在父节点上更改时观察者不触发？

Why are watchers not firing when ui-router state data is changed on parent?

angularjs

angular-ui-router