如何在指令的attrs中观看财产

Question

我有一个控制器,它有一个不时变化的计数器.
该计数器与指令的属性相关联,并在该指令的链接函数内读取.

每次attr值改变时,如何使用指令运行函数？

谢谢.

Answer 1

我正在使用这个方法:

.directive('mydirective',
 [function (){
    return {
      ...
      scope: {
        id: '@',
      },
      controller: function ($scope, $element, $attrs) {
         $attrs.$observe('id', function(passedId) {
           /// do what is needed with passedId
         });
    ...

使用的指令和id传递如下:

<div mydirective id="{{someprop.id}}" />

Answer 2

里面的相应的link功能:(假设你的属性称为counter你的范围变量是:scope)

scope.$watch(attrs.counter, function (newTime) {
                    //do something with the new Time
});

其他方式,肯定更有效的方式:

插值属性

在你的指令中,将scope属性设置为如下(它将被隔离):

scope: { counter: '@'}

counter只要link调用该函数,就会自动观察提供当前值.

'@'不比'='在这里,因为你,我想你不会计数器设置为你的指令一个新值,这意味着你刚才读它.实际上,=对于双向数据绑定更有用,但您可能不需要它.

Answer 3

使用attrs.$observe(key, fn).更多信息,请访问$ compile.directive.Attributes

attrs.$observe('counter',function(counter){

});

相关回答:https://stackoverflow.com/a/14907826/2874153

$ observe()是Attributes对象上的一个方法,因此,它只能用于观察/观察DOM属性的值更改.它仅在指令内使用/调用.需要观察/观察包含插值的DOM属性时使用$ observe(即{{}}).例如,attr1 ="Name:{{name}}",然后在一个指令中:attrs.$ observe('attr1',...).(如果你尝试范围.$ watch(attrs.attr1,...)它将无法工作,因为{{}} s - 你将得到未定义.)使用$ watch进行其他操作.