将HTML插入视图 [英] Insert HTML into view
问题描述
是否可以在AngularJS控制器中创建HTML片段，并在视图中显示此HTML？
Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view?
这来自于要求将不一致的JSON blob成为 id：value 对的嵌套列表。因此，HTML是在控制器中创建的，我现在正在寻找显示。
This comes from a requirement to turn an inconsistent JSON blob into a nested list of id : value pairs. Therefore the HTML is created in the controller and I am now looking to display it.
我已经创建了一个模型属性，但是不能在视图中渲染这个属性，而只是打印HTML。
I have created a model property, but cannot render this in the view without it just printing the HTML.
更新
看起来这个问题产生于将创建的HTML作为引号内的字符串进行角度渲染。将尝试找到一个方法。
It appears that the problem arises from angular rendering the created HTML as a string within quotes. Will attempt to find a way around this.
示例控制器：
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
示例视图：
<div ng:bind="customHtml"></div>
提供：
<div>
"<ul><li>render me please</li></ul>"
</div>
推荐答案
对于Angular 1.x，使用 ng-bind-html 在HTML中：
For Angular 1.x, use ng-bind-html in the HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
在这一点上，您将得到一个尝试使用不安全的值安全上下文错误，因此您需要使用 ngSanitize 或 $ sce 来解决。
At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that.
在控制器中使用 $ sce.trustAsHtml（）转换html字符串。
Use $sce.trustAsHtml() in the controller to convert the html string.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize
有两个步骤：
ngSanitize
There are 2 steps:
-
包括angular-sanitize.min.js资源，即：
< script src =lib / angular / angular-sanitize.min.js>< / script>
在js文件（控制器或通常是app.js）中，包括ngSanitize，即：
angular.module（'myApp'，['myApp.filters'，'myApp。服务'，'myApp.directives'，'ngSanitize']）
In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
这篇关于将HTML插入视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
