Question

我写了一个带有局部范围的控制器和指令。我在postLink方法中设置了范围变量上的观察者，并为更改变量添加了$ interval，同时我在控制器中添加了binded变量上的观察者。

console.clear();
var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope',
  function($scope) {

       $scope.$watch(function() {
      return $scope.ctrlVar;
    }, function(newValue) {
      console.log('WATCHER TWO: newValue = ', newValue);
    }, true);

  }
]);

myApp.directive('testDirective', 
 ['$interval', function($interval) {
    return {
      scope: {
        date: '=dateModel'
      },
      template: "<input type='text' value='{{date}}' />",
      restrict: 'E',
      link: function postLink(scope, element) {
        console.log('link');
        var i = 1;
        $interval(function() {
              scope.date = i++;

        }, 1000);

          scope.$watch('date', function(){
          console.log('WATCHER ONE: newValue = ', scope.date);
        });

      }
    };
  }]
);

HTML：

<body ng-app="myApp">
  <div ng-controller="MainCtrl">
    <test-directive date-model="ctrlVar"></test-directive>
  </div>

  <script src="script.js"></script>
</body>

</html>

我看到调用监听器的顺序是

WATCHER IN CONTROLLER: newValue =  undefined
script.js:32 WATCHER IN DIRECTIVE: newValue =  undefined
script.js:32 WATCHER IN DIRECTIVE: newValue =  1
script.js:10 WATCHER IN CONTROLLER: newValue =  1
script.js:32 WATCHER IN DIRECTIVE: newValue =  2
script.js:10 WATCHER IN CONTROLLER: newValue =  2

我注意到，当在$ interval中更改newValue时，首先调用指令中的监听器。在我的生产代码中（我没有发布代码，因为它有点复杂而且我创建了plunk并且观察者的行为是不同的。）

您知道如何管理手表听众的订单吗？有可能吗？

以下是示例http://plnkr.co/edit/QzeZar?p=preview

Answer 1

我同意@DRobinson，但如果您绝对必须更改观察者的顺序，您可以使用超时为观察者设置一种“优先级”。我不知道有什么方法可以在注册后更改观察者，但您可以延迟注册。

myApp.controller('MainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $timeout(function () {
        $scope.$watch(function () {
            return $scope.ctrlVar;
        }, function (newValue) {
            console.log('WATCHER TWO: newValue = ', newValue);
        }, true);
   }, 10);

}]);

这是一个小提琴，显示观察者两人第一次在观察者之后开火。 http://jsfiddle.net/qj7gn5x4/1/

如何更改angularJS中的观察者订单？

1 个答案: