我正在使用 angularjs 1.2.0-rc.3。我想动态地将 html 代码包含到模板中。为此，我在控制器中使用：
html = "<div>hello</div>";
$scope.unicTabContent = $sce.trustAsHtml(html);
在我得到的模板中：
<div id="unicTab" ng-bind-html="unicTabContent"></div>
它适用于常规 html 代码。但是当我尝试放置 angular 模板时，它不会被解释，它只是包含在页面中。例如，我想包括：
<div ng-controller="formCtrl">
<div ng-repeat="item in content" ng-init="init()">
</div>
</div>
非常感谢
此解决方案不使用硬编码模板，您可以编译嵌入在 API 响应中的 Angular 表达式。
步骤 1. 安装此指令：https : //github.com/incuna/angular-bind-html-compile
步骤 2.在module中包含指令。
angular.module("app", ["angular-bind-html-compile"])
步骤 3.在模板中使用指令：
<div bind-html-compile="letterTemplate.content"></div>
结果：
控制器对象
$scope.letter = { user: { name: "John"}}
JSON 响应
{ "letterTemplate":[
{ content: "<span>Dear {{letter.user.name}},</span>" }
]}
HTML 输出 =
<div bind-html-compile="letterTemplate.content">
<span>Dear John,</span>
</div>
作为参考，这里是相关指令：
(function () {
'use strict';
var module = angular.module('angular-bind-html-compile', []);
module.directive('bindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
};
}]);
}());
这就是我所做的，不知道它是否是角度方式TM，但它有效并且非常简单；
.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(attrs.dynamic, function(html) {
$compile(element.html(html).contents())(scope);
});
}
};
});
所以;
<div id="unicTab" dynamic="unicTabContent"></div>
编辑：我找到了 angular way，它非常简单。
$templateCache.put('unicTabContent', $sce.trustAsHtml(html));
<div id="unicTab" ng-include="'unicTabContent'"></div>
不需要制定自己的指令或任何东西。但这是一种绑定一次的交易，它不会像自定义指令那样看到对 html 所做的更改。
正如 Vinod Louis 在他的评论中所说，最好的方法是使用模板。我必须在常规代码之外定义一个模板，例如我在 index.html 中添加了该代码：
<script type="text/ng-template" id="unic_tab_template.html">
<div ng-switch on="page">
<div ng-switch-when="home"><p>{{home}}</p></div>
<div ng-switch-when="form">
<div ng-controller="formCtrl">
<div ng-repeat="item in content">{{item.name}}:{{item.value}}</div>
</div>
</div>
<div ng-switch-default>an error accured</div>
</div>
</script>
此模板是有条件的，因此根据 $scope.page 的值，它会在 3 个模板（第三个是错误处理程序）之间切换。要使用它，我有：
<div id="unicTab" ng-controller="unicTabCtrl">
<div ng-include="'unic_tab_template.html'"></div>
</div>
这样我的页面会根据 unicTabCtrl 控制器中的 $scope 改变。
总结插入 angularsjs 模板接缝的想法难以实现（$compile 接缝是解决方案，但我无法使其工作）。但是，您可以使用条件模板。
我试图做同样的事情并遇到了这个module。
http://ngmodules.org/modules/ng-html-compile
我只是包含它，然后我就可以使用“ng-html-compile”而不是“ng-bind-html”
一种方法是使用指令来插入包含角度表达式的自定义模板
<div id="unicTab" unic-tab-content></div>
app.directive("unicTabContent",function(){
return {
restrict:"A",
template:'{{unicTabContent}}'
}
})