Question

我正在测试动态更改模板的想法。我结束的示例代码过于简单化了整个过程只是为了表明问题：

<div ng-app="app" ng-controller="MyController">
    <content-item ng-repeat="item in data"></content-item>
</div>

和JS：

var app = angular.module('app', []);

app.controller('MyController', function ($scope) {
    $scope.data = ["heading1", "heading2"];
});

app.directive('contentItem', function ($compile) {
    var templates = [
        '<h1>{{item}}</h1>',
        '<h4>{{item}}</h4>'];

    var compiledTemplates = [];

    for (var i = 0, ii = templates.length; i < ii; i++) {
        compiledTemplates.push($compile(templates[i]));
    }

    return {
        restrict: "E",
        replace: true,
        link: function (scope, element, attrs) {

            var template = templates[0];
            var link = $compile(template);

            //var link = compiledTemplates[0];

            element.append(link(scope));
        }
    };
});

硬编码是模板（0）的数量只是为了简化代码而未使用compiledTemplates数组（下一个示例将使用它）

渲染整个元素列表的效果：

标题1

heading2

行。但我想预编译模板，因此每次调用链接函数时都不会发生编译过程。

所以，如果我使用的是compileTemplates，我只需要先对链接函数中的行进行注释，然后取消注释fird行（上面代码中的注释）。最后链接功能看起来这次：

link: function (scope, element, attrs) {

                var link = compiledTemplates[0];

                element.append(link(scope));
            }

差别不大（至少我看不出差异），但效果是：

标题2

（如果我们在列表中有10个项目，则只会呈现最后一个项目）

为什么呢？我错过了什么？

这是JSFiddle：http://jsfiddle.net/yoorek/DcaVM/

Answer 1

也许我说的是错的，但ng-repeat是一个特殊的指令。它不会编译每个项目。

在documentation中阅读有关编译器的信息

ngRepeat通过阻止编译过程降序来工作   进入LI元素，因此它可以克隆原始和   处理插入和删除DOM节点本身。

相反，ngRepeat指令分别编译LI。的结果   LI元素编译是一个包含所有的链接函数   LI元素中包含的指令，随时可以附加   到LI元素的特定克隆。

在运行时，ngRepeat会监视表达式并添加项目   在数组中克隆LI元素，为其创建一个新的范围   克隆LI元素并在克隆的LI上调用链接函数。

我希望这会有所帮助！

预编译模板效果奇特

1 个答案: