javascript - 等待评估的属性

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

这是因为在早期版本中，在指令链接之前未初始化内插属性。根据changelog在 1.1.3 中对此进行了更改。

从 1.0.8 文档：

Attributes 对象 - 作为参数在 link() 或 compile() 函数中传递 - 是一种访问方式：

• 观察插值属性：使用 $observe 观察包含插值的属性的值变化（例如 src="{{bar}}"）。这不仅非常有效，而且也是轻松获得实际值的唯一方法，因为在链接阶段尚未评估插值，因此此时该值设置为未定义。

例子：

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：http ://plnkr.co/edit/WP8eSS?p=preview

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

Answer 2

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