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函數。