Question

我有自定义指令，在链接函数的一侧添加一个属性到范围，然后添加一个监视它。如果我从控制器更改了scope属性的值，则手表会触发。如果我从指令中更改了相同的值，它将不会被触发。

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

请参阅指令内的setTimeout，此更改不会产生任何影响。

p.s：这只是模拟我没有使用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。更改了Wheneve模型，应通知angular更新视图。使用$timeout函数，该通知将自动触发，否则您需要致电$scope.$apply函数。

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

2 个答案: