AngularJS在部分內部循環中的編譯內部呈現模板

Question

我有一個局部指令，該指令有一個指令，該指令在指令內部使用編譯后的HMTL-as-a-string在一個循環中渲染一堆東西。 此HTML字符串本身包含ng-include ，但不會呈現出來。

請參閱我的jsfiddle示例

基本上，這不包括template2.html ：

element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src="template2.html"></div><br>');

任何指針將不勝感激。

謝謝！

Answer 1

工作演示

只是需要寫為

src=" \'template2.html\'"


var linker = function(scope, element, attrs) {
    element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src=" \'template2.html\'"></div><br>');
    $compile(element.contents())(scope);
};

更多的DOCS信息

Answer 2

Vinod的以上回答（用src="\\'template2.html\\'"代替src="template2.html" ）是正確的，盡管我建議使用實際模板，而不是自己在鏈接函數中手動編譯模板。 在您的示例中，您實際上沒有獲得雙向綁定的好處。 您只是獲取compile函數的html輸出，並且如果基礎數據發生更改，它將永遠不會更新。 這是修改示例以顯示綁定（和Vinod的模板修復）：

http://jsfiddle.net/kf3vZ/5/

請注意，如果您更改任何復選框的值，則偽指令中的值不會改變。

現在是使用指令的template參數的版本：

http://jsfiddle.net/kf3vZ/7/

現在，如果您更改文本字段，則指令值也將更改。

另外要注意，因為你已經在使用script標簽為你的模板，你可以替換template與您的指令templateUrl並提供id腳本模板。