Question

我正在尝试使用我构建的存储库检索指令的模板，该存储库返回一个解析为模板内容的promise。

在指令中使用compile函数和在$compile函数中使用link服务有什么区别？

编译功能

compile: function (element, attrs) {
    templateRepository.get('Shared/Login').then(function (result) {
        element.replaceWith(result);
    });
}

这会呈现HTML，但范围不会绑定到DOM元素。

使用$ compile

link: function (scope, elem, attrs) {
    templateRepository.get('Shared/Login').then(function (result) {
        elem.html(result);
        $compile(elem.contents())(scope);
    });
}

这可以按预期工作。

这有什么区别？

Answer 1

$compile：

将HTML字符串或DOM编译为模板并生成模板   函数，然后可用于链接范围和模板   在一起。

编译是遍历DOM树并匹配DOM的过程   指令的要素。

所以$compile对任何DOM元素传递给它进行Angular处理。

在$compile期间，运行所有找到的指令中的编译功能。请注意，无论该指令有多少个实例，每个指令的编译函数只执行一次。

执行$compile生成的模板函数时（“将范围和模板链接在一起”），然后执行每个指令的链接函数（作为第一个参数传入范围）。

所以$compile转换DOM。虽然指令的编译功能是针对该指令运行的，但在转换期间。

这是一个可以试验的fiddle，它显示了执行的顺序。

Answer 2

我认为，编译功能更敏捷：

来自docs：

编译函数可以有一个返回值，可以是a   功能或对象。

返回（post-link）函数 - 相当于注册   当通过配置对象的link属性链接函数时   编译函数为空。

返回一个对象，其中包含通过pre和post注册的函数   properties - 允许您控制何时应该使用链接功能   在链接阶段调用。请参阅有关预链接的信息   下面的后连接功能。

在Angular中指令的$ compile和编译函数之间的区别？

2 个答案: