如何在 Angular 指令中监听元素的属性变化？

Question

这里有一个 plunker，它很好地揭示了我正在尝试做的事情。

我有一个指令！ 隔离范围 !具有要更改的属性

<div ng-init="environment='natural'">
  <input ng-model=environment>
  <chameleon env="{{ environment }}"></chameleon>
</div>

我希望我的指令响应全局范围的变化：

angular.module('app', []).directive('chameleon', function () { return {

  template: 'I am {{ color }}',
  scope: {} // isolated

  ,link: function (scope, element, attrs) {

    scope.$watch('env', function () {
       scope.color = getColor();
    });

    function getColor () {
       switch (attrs.env) {
          case 'excited': return 'red';
          ...
          case 'natural':
          default: return 'green';
       }
    }

        /* here I need something similar to this not-working code :
         *   element.on('attributeChange', function () {
         *      scope.env = attrs.env
         *   });
         */
  }

}});

我知道我可以使用隔离作用域来绑定周围作用域的值，比如

scope: {
  env: '='
}

但我确实需要一个独立的组件，因为属性 env 的值不仅会从模型中更改。

随时 fork 我的 plunker。

Answer 1

您需要使用与 $watch 相同的 attrs.$observe。它适用于 {{}} 值，值的变化将调用 $observe 函数。

代码

attrs.$observe('env', function() {
     scope.color = getColor();
});

Demo Plunkr

如何在 Angular 指令中监听元素的属性变化？

How can I listen an element's attribute change in an Angular directive?

javascript

angularjs

angularjs-directive

angular-directive