Question

AngularJS 1.0.8

我创建了一个指令：

app.directive('myDirective',function(){
  return{
    restrict: 'A',
    scope: true,
    link: function(scope,element,attrs)

        console.log(attrs.index); // returns undefined

        scope.saveChange = function(){
            console.log(attrs.index); returns correct value

        };
    }
  }
});

使用该指令的元素示例：

 <!-- part of ngRepeat section -->
<input myDirective index="{{$index}}" type="text">

为什么，当调用我的链接函数时，console.log(attrs.index)将返回undefined，但如果我触发scope.saveChange()，则会传递正确的值？

Answer 1

这是因为在早期版本中，在指令链接之前没有初始化插值属性。根据{{3}}，在1.1.3中对此进行了更改。

从1.0.8文档：

Attributes对象 - 作为link（）或中的参数传递   compile（）函数 - 是一种访问方式：


观察插值属性：使用$ observe观察包含插值的属性的值变化（例如src =“{{bar}}”）。   这不仅非常有效，而且也是轻松实现的唯一途径   得到实际值，因为在链接阶段   插值还没有被评估，所以值就是这个   时间设置为undefined。

示例：

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {

      attrs.$observe('index', function(val) {
        console.log(attrs.index);
      });
    }
  }
});

Plunker 1.0.8和$observe：changelog

Plunker 1.1.3且没有$observe：http://plnkr.co/edit/WP8eSS?p=preview

Answer 2

很确定这是因为console.log(attrs.index);的范围不同。例如，您经常会发现需要在模板上使用this.field而不是field。

等待评估属性

2 个答案: