預編譯模板奇怪效果

我正在測試動態更改模板的想法。預編譯模板奇怪效果

<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

確定。但我想預編譯模板，因此每次調用鏈接函數時都不會發生編譯過程。因此，如果我使用了compiledTemplates，我只需要首先評論鏈接函數中的行並取消註釋fird行（在上面的代碼中註釋）。最終鏈接功能看起來這個時間：

link: function (scope, element, attrs) { 

       var link = compiledTemplates[0]; 

       element.append(link(scope)); 
      }

沒有太大的區別（至少我看不出區別）的，但效果是：

標題2

（如果我們在列表中只有10個項目纔會呈現）

爲什麼？我錯過了什麼？

這裏的jsfiddle：http://jsfiddle.net/yoorek/DcaVM/

來源

2014-01-08 Yoorek

我_think_編譯和鏈接的對象在兩種情況下都是相同的，所以首先你將它追加到一個地方，然後將它追加到下一個地方（所以它不再在第一個地方）。 – towr

是的！這就是我做錯了。感謝那！ – Yoorek

也許我說的是錯的，但NG重複是一種特殊的指令。它不會編譯每個項目。

這裏閱讀在documentation關於編譯

ngRepeat防止編譯過程從降到LI元素，因此它可以使原本和手柄插入的克隆和刪除DOM節點工程本身。

而是ngRepeat指令分別編譯LI。 LI元素編譯的結果是一個鏈接函數，該函數包含LI元素中包含的指令的所有，準備好將附加到LI元素的特定克隆。

在運行時，ngRepeat監視表達式，並且隨着項目添加到數組中，它克隆LI元素，爲克隆的LI元素創建新的作用域並調用克隆的LI上的鏈接函數。

我希望能幫上忙！

來源

2014-01-08 17:10:09 gab

情況並非如此 - 爲每個列表元素調用ngRepeat調用鏈接函數，因此在鏈接函數（第一種情況）中編譯模板效率不高 - 您可以將console.log放在鏈接中以查看。這就是爲什麼我將模板編譯爲指令體（我可以將它移動到指令的編譯函數，但我需要理解爲什麼第二個案例不工作不找到解決方案） – Yoorek

預編譯模板奇怪效果

回答

相關問題