Предварительно скомпилированные шаблоны странный эффект

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

Заголовок 2

OK. Но я хочу предварительно скомпилировать шаблоны, поэтому процесс компиляции не происходит при каждом вызове функции ссылки.

Итак, если я использую compiledTemplates, мне просто нужно сначала прокомментировать строки в функции ссылок и раскомментировать строку fird (комментарий в коде выше). В функции конечного ссылка выглядит на этот раз:

link: function (scope, element, attrs) { 

       var link = compiledTemplates[0]; 

       element.append(link(scope)); 
      } 

Не много разницы (по крайней мере, я не вижу разницы), но эффект:

заголовок 2

(если мы имеют 10 наименований в списке, последний будет отображаться)

Почему? Что мне не хватает?

Вот JSFiddle: http://jsfiddle.net/yoorek/DcaVM/

Answer 1

Может быть, что я говорю неправильно, но нг-повторить это специальная директива. Он не будет компилировать каждый элемент.

Читайте здесь в documentation о компиляторе

ngRepeat работает, предотвращая процесс компиляции от сползания в элемент LI, чтобы он мог сделать клон оригинальной и ручки вставки и удаления DOM узлов сам.

Вместо этого директива ngRepeat компилирует LI отдельно. Результатом компиляции элементов LI является функция связывания, которая содержит все директив, содержащихся в элементе LI, готовых к присоединению к конкретному клону элемента LI.

Во время выполнения ngRepeat наблюдает выражение и, как элементы добавляются в массив клонов элемент LI, создает новую область для клонированного элемента LI и вызывает функцию ссылки на клонированной LI.

Надеюсь, что это поможет!