Angularjs deep $watch 不工作

Question

即使在出厂时激活 Deep watch 也不会触发。如何解决此问题以便在 'name' 值更改时触发事件？

Javascript代码：

var app = angular.module('app', []);

app.controller('FirstCtrl', function($scope,testFactory) {
  $scope.obj = testFactory.obj;

});

app.controller('SecondCtrl',function($scope,testFactory){
  $scope.obj = testFactory.obj;
  $scope.valueChange = testFactory.valueChange;
});

app.factory('testFactory', ['$rootScope',function ($rootScope) {

    var factory = {};

    factory.obj = { 'name':'John Doe'};

    $rootScope.$watch(factory.obj,function(){
        alert('Value Changed');
    },true);

    factory.valueChange = function(){
      if(factory.obj.name == 'John Doe'){
      factory.obj.name = "Jane Doe";
      }
      else
      {
        factory.obj.name = "John Doe";
      }
    };

    return factory;

}]);

Html代码：

  <body >
    <div ng-controller="FirstCtrl">
    <h4>Value bound with FirstCtrl and factory</h4>
    <input type="text" ng-model="obj.name"/>
    </div>

    <div ng-controller="SecondCtrl">
    <br>
    <br>
    <h4>Value from SecondCtrl. This shows that the bind between factory and controller is working</h4>
    <p>{{obj.name}}</p>
    <h4>Value updated directly in the factory</h4>
    <button ng-click="valueChange()">Change Value</button>
    </div>
  </body>

笨蛋：http://plnkr.co/edit/LhHOa2NehWGVEfpHfKJQ?p=preview

Answer 1

试试这个方法：

$rootScope.$watch(function () {
    return factory.obj;
}, function(){
    alert('Value Changed');
}, true);

Plunker

更好的解决方案是观察控制器而不是工厂的变化：

app.controller('SecondCtrl',function($scope,testFactory){
    $scope.obj = testFactory.obj;
    $scope.valueChange = testFactory.valueChange;
    $scope.$watch('obj', function () {
        alert('Value changed');
    }, true);
});

在这种情况下，$scope.obj 和 testFactory.obj 指向内存中的同一个对象。所以不管你会看哪一部。

Angularjs deep $watch 不工作

Angularjs deep $watch not working

javascript

angularjs

watch