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脚本模板。