如何让 ng-bind-html 编译 angularjs 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19726179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make ng-bind-html compile angularjs code
提问by Clement Roblot
I am working with angularjs 1.2.0-rc.3. I'd like to include html code into a template dynamically. For that I use in the controller :
我正在使用 angularjs 1.2.0-rc.3。我想动态地将 html 代码包含到模板中。为此，我在控制器中使用：
html = "<div>hello</div>";
$scope.unicTabContent = $sce.trustAsHtml(html);
In the template I got :
在我得到的模板中：
<div id="unicTab" ng-bind-html="unicTabContent"></div>
It works fine for regular html code. But when I try to put angular template it is not interpreted, it is just included in the page. For example I'd like to include :
它适用于常规 html 代码。但是当我尝试放置 angular 模板时，它不会被解释，它只是包含在页面中。例如，我想包括：
<div ng-controller="formCtrl">
<div ng-repeat="item in content" ng-init="init()">
</div>
</div>
Thanks a lot
非常感谢
回答by Ryan.lay
This solution doesn't use hardcoded templates, and you can compile Angular expressions embedded within an API response.
此解决方案不使用硬编码模板，您可以编译嵌入在 API 响应中的 Angular 表达式。
Step 1.Install this directive: https://github.com/incuna/angular-bind-html-compile
步骤 1.安装此指令：https: //github.com/incuna/angular-bind-html-compile
Step 2.Include the directive in the module.
步骤 2.在模块中包含指令。
angular.module("app", ["angular-bind-html-compile"])
Step 3.Use the directive in the template:
步骤 3.在模板中使用指令：
<div bind-html-compile="letterTemplate.content"></div>
Result:
结果：
Controller Object
控制器对象
$scope.letter = { user: { name: "John"}}
JSON Response
JSON 响应
{ "letterTemplate":[
{ content: "<span>Dear {{letter.user.name}},</span>" }
]}
HTML Output =
HTML 输出 =
<div bind-html-compile="letterTemplate.content">
<span>Dear John,</span>
</div>
For reference sake, here's the relevant directive:
作为参考，这里是相关指令：
(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);
});
}
};
}]);
}());
回答by Hashbrown
This is what I've made, no idea if it's the angular wayTM, but it works and is super simple;
这就是我所做的，不知道它是否是角度方式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);
});
}
};
});
So;
所以;
<div id="unicTab" dynamic="unicTabContent"></div>
Edit: I found the angular way, and it's supersimple.
编辑：我找到了 angular way，它非常简单。
$templateCache.put('unicTabContent', $sce.trustAsHtml(html));
<div id="unicTab" ng-include="'unicTabContent'"></div>
Don't need to make your own directives or anything. But it's a bind-once sort of deal, it wont see changes made to your htmllike the custom directive does.
不需要制定自己的指令或任何东西。但这是一种绑定一次的交易，它不会像自定义指令那样看到对 html 所做的更改。
回答by Clement Roblot
As Vinod Louis says in his comment, the best way to do that was to use templates. I had to define a template outside of the regular code, for example I added that code inside of my index.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>
This template is conditional, so depending on the value of $scope.page, it switches between the 3 templates (the third being an error handler). To use it I had :
此模板是有条件的，因此根据 $scope.page 的值，它会在 3 个模板（第三个是错误处理程序）之间切换。要使用它，我有：
<div id="unicTab" ng-controller="unicTabCtrl">
<div ng-include="'unic_tab_template.html'"></div>
</div>
That way my page changes depending on the $scope inside of my unicTabCtrl controller.
这样，我的页面会根据 unicTabCtrl 控制器中的 $scope 进行更改。
To conclude the idea of inserting angularsjs template seams to be difficult to realize ($compile seams to be the solution, but I wasn't able to make it work). But instead you may use conditional templating.
总结插入 angularsjs 模板接缝的想法难以实现（$compile 接缝是解决方案，但我无法使其工作）。但是，您可以使用条件模板。
回答by nbarth
I was trying to do the same thing and came across this module.
我试图做同样的事情并遇到了这个模块。
http://ngmodules.org/modules/ng-html-compile
http://ngmodules.org/modules/ng-html-compile
I just included it and then I was able to use "ng-html-compile" instead of "ng-bind-html"
我只是包含它，然后我就可以使用“ng-html-compile”而不是“ng-bind-html”
回答by charlietfl
One way is use a directive for purpose of inserting custom templates that include angular expresssions
一种方法是使用指令来插入包含角度表达式的自定义模板
<div id="unicTab" unic-tab-content></div>
app.directive("unicTabContent",function(){
return {
restrict:"A",
template:'{{unicTabContent}}'
}
})
回答by Lukasz Frankowski
My solution to similar problem in my current app without using template (not elegant, but working):
我在不使用模板的情况下对当前应用程序中类似问题的解决方案（不优雅，但有效）：
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);
});
};
}
};
}]);
It requires ngBindHtmlon the same element and compiles the element content after it changes with ngBindHtml.
它需要ngBindHtml在同一个元素上，并在它改变后编译元素内容ngBindHtml。
<div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile></div>
ng-html-compilelooks similar but at first glance it won't be recalculated when the template content is changing. But I haven't tried it.
ng-html-compile看起来相似但乍一看不会在模板内容更改时重新计算。但我没试过。
回答by Stokely
The code below is much simpler using Angular's built-in $interpolate and $sce objects. First inject the $interpolate and $sce Angular objects into your directive as you do anything custom you need in your directive.
下面的代码使用 Angular 的内置 $interpolate 和 $sce 对象要简单得多。首先将 $interpolate 和 $sce Angular 对象注入您的指令，因为您在指令中执行任何您需要的自定义操作。
amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}
Then create all your scoped variables found in your imported html expressions...
然后创建在导入的 html 表达式中找到的所有范围变量...
$scope.custom = 'Hello World';
Next use $interpolate to process your custom HTML and its expressions...then make sure you use the $sce object to trust it as HTML before binding...
接下来使用 $interpolate 处理您的自定义 HTML 及其表达式...然后确保在绑定之前使用 $sce 对象将其作为 HTML 信任...
var html = $interpolate('<b>{{custom}}</b>')($scope);
$scope.data = $sce.trustAsHtml(html);
Finally, in your view, just make sure use an element with the "ng-bind" or "ng-bind-html" on it in your view display. I found the $sce piece wont display the HTML as HTML (sees it as text) if you don't bind it in your html template like this...
最后，在您的视图中，只需确保在视图显示中使用带有“ng-bind”或“ng-bind-html”的元素。我发现 $sce 部分不会将 HTML 显示为 HTML（将其视为文本），如果您没有像这样将它绑定到您的 html 模板中...
<span ng-bind-html="data"></span>
You should see in bold...
你应该看到粗体...
Hello World
你好，世界
I used this trick to import in text/HTML with custom angular {{expressions}} from a web.config.
我使用这个技巧从 web.config 导入带有自定义角度 {{expressions}} 的文本/HTML。
回答by Stalinko
A lot simplified solution of @clement-roblot based on built-in templates.
大量基于内置模板的@clement-roblo 简化解决方案。
Controller:
控制器：
app.controller('TestCtrl', [
'$scope',
'$templateCache',
function ($scope, $templateCache) {
$templateCache.put('test.html', '2 + 2 = {{ 2 + 2 }}');
}
]);
View:
看法：
<div ng-include="'test.html'"></div>
