AngularJS：指令中的值更改时，$ watch不触发

Question

我有一个自定义指令，它在链接功能旁边为范围添加了一个属性，然后向其添加了一个监视。 如果我从控制器更改了scope属性的值，则手表会着火。 如果我从指令内部更改相同的值，它将不会被解雇。

这是一个示例： http : //jsbin.com/bocixiha/3/edit

请参阅指令中的setTimeout，此更改没有任何影响。

ps：这只是我有一个模拟，我没有使用setTimeout，但是它的工作方式相同。

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

app.controller('myCtrl', function($scope) {
  $scope.changeProp = function() {
    $scope.options.someProperty = "Hello Stackoverflow";
  };
});

app.directive('mydir', function() {
  return {
    priority: 5001,
    restrict: 'A',
    compile: function(element, attrs) {
      return function(scope, element, attrs) {
        scope.options = {
          someProperty: "Hello World"
        };

        setTimeout(function() {
          console.log("Timeout Fired!");
          scope.options.someProperty = "This never gets set";
        }, 5000);

        scope.$watch('options.someProperty', function(n,o) {
          //This will fire when value changed from controller only.
          console.log("New: " + n + " Old: " + o);
        });
      };
    }
  };  
});

Answer 1

需要将更改通知Angular.js。 setTimeout本身不会告诉Angular刷新模型； 您需要使用$timeout服务而不是setTimeout或将setTimeout回调的内容包装在scope.$apply()中，以使Angular知道范围中的某些内容可能已被更改。

Answer 2

将setTimeout替换为$timeout更改模型后，应通知angular更新视图。通过使用$timeout函数，该通知将自动触发，否则需要调用$scope.$apply函数。