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的值不仅会从模型中更改。

随意分叉我的傻瓜。

Answer 1

您需要使用与attrs.$observe相同的$watch。它适用于{{}}值＆amp;更改值将调用$observe函数。

<强>代码

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

Demo Plunkr

如何在Angular指令中监听元素的属性更改？

1 个答案: