如何让ng-bind-html编译angularjs代码
我正在使用angularjs 1.2.0-rc.3。 我想dynamic地将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>
非常感谢
此解决scheme不使用硬编码模板，您可以编译embedded在API响应中的Angularexpression式。
第1步 ：安装此指令： https ： //github.com/incuna/angular-bind-html-compile
第2步。在模块中包含指令。
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); }); } }; }]); }());
这就是我所做的，不知道它是以angular度的方式 TM ，但它的工作原理和超级简单;
.directive('dynamic', function($compile) { return { restrict: 'A', replace: true, link: function (scope, element, attrs) { scope.$watch(attrs.dynamic, function(html) { element[0].innerHTML = html; $compile(element.contents())(scope); }); } }; });
所以;
<div id="unicTab" dynamic="unicTabContent"></div>
正如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个模板（第三个是error handling器）之间切换。 使用它我有：
<div id="unicTab" ng-controller="unicTabCtrl"> <div ng-include="'unic_tab_template.html'"></div> </div>
这样我的页面改变，取决于我的unicTabCtrl控制器的$范围。
总结插入angularsjs模板接缝的想法很难实现（$编译接缝是解决scheme，但我无法使其工作）。 但是，您可以使用有条件的模板。
我试图做同样的事情，并遇到这个模块。
http://ngmodules.org/modules/ng-html-compile
我只是包括它，然后我能够使用“ng-html-compile”而不是“ng-bind-html”
一种方法是使用指令来插入包含angular度expression式的自定义模板
<div id="unicTab" unic-tab-content></div>
app.directive("unicTabContent",function(){ return { restrict:"A", template:'{{unicTabContent}}' } })
我的解决scheme，在我目前的应用程序类似的问题，而不使用模板（不优雅，但工作）：
directive('ngBindHtmlCompile', ['$compile', function ($compile) { return { restrict: 'A', compile: function compile(tElement, tAttributes, transcludeFn) { return function postLink(scope, element, attributes) { scope.$watch(function() { return scope.$eval(attributes.ngBindHtml); }, function(newValue, oldValue) { $compile(element.children())(scope); }); }; } }; }]);
它需要ngBindHtml在同一个元素上，并在元素内容被ngBindHtml改变后编译。
<div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile></div>
ng-html-compile看起来类似，但乍一看，当模板内容改变时不会重新计算。 但是我没有尝试过。
下面的代码使用Angular的内置$ interpolate和$ sce对象更加简单。 首先将$ interpolate和$ sce Angular对象注入到您的指令中，就像您在指令中进行任何自定义操作一样。
amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}
然后创build你在导入的htmlexpression式中find的所有范围variables…
$scope.custom = 'Hello World';
接下来使用$ interpolate来处理你的自定义的HTML及其expression式…然后确保你使用$ sce对象在绑定之前把它作为HTML信任。
var html = $interpolate('<b>{{custom}}</b>')($scope); $scope.data = $sce.trustAsHtml(html);
最后，在你的视图中，只要确保在视图显示中使用带有“ng-bind”或“ng-bind-html”的元素即可。 我发现$ sce的一块不会显示为HTML的HTML（看作是文本），如果你不把它绑定在你的HTML模板，像这样…
<span ng-bind-html="data"></span>
你应该用粗体看…
你好，世界
我使用这个技巧从web.config中以自定义angular度{{expression式}}导入文本/ HTML。
