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属性的值更改。它仅在指令内使用/调用。需要时使用$ observe 观察/观察包含插值的DOM属性（即 {{}}的）。例如，attr1 =“Name：{{name}}”，然后在一个指令中： attrs。$ observe（'attr1'，...）。（如果你尝试范围。$ watch（attrs.attr1， ...）它将无法工作，因为{{}} s - 你将得到未定义。）使用 $注意其他一切。

Answer 4

如果可以，请将指令更改为隔离范围并使用=定义。这将为scope属性设置双向绑定：

app.directive('myDirective', function() {

    return {
        scope: { counter: '=' }
    }
});

Answer 5

我必须自己实施并找到解决方案！不幸的是，当我尝试。$ watch时，错误只是在控制台上喷出。所以我使用了$ observe。

这是我的解决方案：

angular.module('app').directive('aDate', [
    function() {
        return {
            template: '<span>{{date}}</span>',
            restrict: 'E',
            replace: true,
            link: function(scope, element, attrs) {
                attrs.$observe('date', function (val) {
                    var d = new Date(val);
                    element.text(d);
                });
            }
        };
    }
]);

当元素的日期属性发生变化时，上面的代码会更改作用域的日期！

干杯！

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

5 个答案:

内插属性