Question

我有这段代码：

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {},
    template: '<span>{{bar}}</span>',
    compile: function(element, attrs) {
      element.attr('title', '{{bar}}');
      return function(scope, element, attrs) {
        scope.bar = 'hello';
        $compile(element)(scope);
      }
    }
  }
});

Plunkr： http://plnkr.co/edit/nFTgvYqoiFAthmjoizWS?p=preview

如果删除链接函数中的$compile位，则title属性保留为表达式文本（{{bar}}）而不是值'hello'）;

任何人都可以解释原因吗？

我认为（根据我在文档中的内容），这就是编译阶段的用途 - 操作模板并为范围和数据绑定的链接做好准备。为什么我需要再次手动拨打$compile？模板已经编译好了吗？

Answer 1

也许相位名称应该从compile，preLink和postLink更改为postCompile，preLink和postLink。在链接到作用域之前，postCompile阶段可以操作DOM，此时已创建链接函数但未创建作用域。可以添加不需要编译的DOM。如果添加了包含指令或需要插值的其他元素，则需要编译和链接这些附加元素，以使指令和插值工作。

要在编译之前对模板进行操作，请为模板属性提供一个函数：template: function(tElement, tAttrs) {}。有关详细信息，请参阅AngularJS Comprehensive Directive API Reference -- Template。

你可以共享一个引用“可以添加不需要编译的DOM等”或者解释你是怎么发现的？

一些信息来源：

AngularJS指令 - 为什么我需要在link（）中调用$ compile来编译在compile（）中定义的表达式？

1 个答案: