javascript - $watch 使用隔离范围时内部 Angular Directive(指令)的值变化

Question

我正在尝试找到一种方法来监视我正在确定指令范围的对象中属性值的变化，但我无法弄清楚我在这里做错了什么。

这是我的指令代码:

.directive('selectService', [function() {
  return {
    restrict: 'EA',
    scope: {
      distribution: '='
    },
    link: function(scope, element, attrs) {
      scope.$watch(scope.distribution.name, function(newValue) {
        console.log("Changed to " + newValue);
      });

所以说运行时的分布是这样的:

{ name: '', type: 'all' ... }

我想监视属性“名称”何时更改为具有值，以便我可以在指令中启用选择菜单。我所做的一切似乎都不起作用。如有任何帮助，我们将不胜感激。

Answer 1

只需以正常方式使用监视，提供一个表示范围属性的字符串或一个返回要监视的值的函数。

  scope.$watch('distribution.name', function(newValue) {
    console.log("Changed to " + newValue);
  });

要在对象distribution上设置深度监视，请将 watch 的第三个参数设置为 true。当您提供 scope.distribution.name 作为 watch 函数的第一个参数时，它只会在 scope.distribution.name 的值(当时)上设置监视> 这是不正确的。

演示

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.distribution = {};
}).directive('selectService', [
  function() {
    return {
      restrict: 'EA',
      scope: {
        distribution: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch("distribution.name", function(newValue) {
          console.log("Changed to " + newValue);
        });
      }
    }
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input ng-model="distribution.name">{{distribution.name}}
  <div select-service distribution="distribution"></div>
</div>