Question

我想了解有关编译功能和转换的更多信息，并找到了这个Plnkr。此代码包含advanced tab指令。根据这个指令，我开始创建自己的指令，看看会发生什么，并查看变量的值。

对于我的测试，我正在玩我的'按钮栏'。完成后我创建了这段代码：

testapp.directive('buttonBar', function($compile) {
    return {
        restrict: 'EA',
        compile: function(cElement){
            var title,
                template;

            template = "<div class='well'><div class='button-bar-title'></div></div>";
            title = cElement.find(".title");
            console.log("title:", title.html());

            return function(scope, element, attributes){
                var well = angular.element(template),
                    titleDiv = well.find(".button-bar-title");

                titleDiv.append(title.html());

                element.empty();
                element.append(well);

                $compile(titleDiv)(scope);

            }
        }
    };
});

没什么特别的。但是当我查看代码时，我想，为什么要使用编译功能？我想我可以使用链接函数重构这个，所以我做了：

testapp.directive('buttonBar', function($compile) {
    return {
        restrict: 'EA',
        link: function(scope, element, attributes){
            var title,
                template,
                well,
                titleDiv;

            template = "<div class='well'><div class='button-bar-title'></div></div>";
            title = element.find(".title");
            console.log("title:", title.html());

            well = angular.element(template),
            titleDiv = well.find(".button-bar-title");

            titleDiv.append(title.html());

            element.empty();
            element.append(well);

            $compile(titleDiv)(scope);
        }
    };
});

这给了我完全相同的结果。

此时我很困惑，为什么最初的plunker作者使用编译函数而不是链接函数？有充分的理由吗？或者是否有关于何时使用编译或链接功能的指南？

编辑：对于这两个指令，我使用了相同的HTML（在控制器上定义了primary1Label）：

<button-bar>
    <div class="title">De titel is {{primary1Label}}</div>  
</button-bar>

Answer 1

在您提供的示例中，compile是正确的方法，因为它在克隆模板之前执行，因此对DOM执行的操作较少。

两者之间最根本的区别是编译对DOM上的所有指令运行一次，而链接运行每个单独的元素。

因此，如果您想要执行模板DOM操作，建议您在编译函数中执行此操作。

如果你想单独监听范围变量并执行实例DOM操作（即仅在此元素上），那么链接功能就是你想要的。

这里有另一个答案What is the difference between compile and link function in angularjs可以更彻底地解释它。

你可以在Angular中使用链接函数而不是编译函数吗？

1 个答案: