将HTML插入到视图中

是否有可能在AngularJS控制器中创buildHTML片段，并在视图中显示此HTML？

这来自将一个不一致的JSON blob变成id : value对的嵌套列表的要求。 因此，HTML在控制器中创build，我现在正在寻找显示它。

我已经创build了一个模型属性，但是不能在视图中渲染它，只需要打印HTML。

---

更新

看来问题出现在angular度渲染创build的HTML作为引号内的string。 将尝试find解决这个问题的方法。

示例控制器：

 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> 

Answer 1

对于Angular 1.x，在HTML中使用ng-bind-html ：

 <div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div> 

此时，您将attempting to use an unsafe value in a safe context错误中attempting to use an unsafe value in a safe context因此您需要使用ngSanitize或$ sce来解决该问题。

$ SCE

在控制器中使用$sce.trustAsHtml()来转换htmlstring。

  $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar); 

ngSanitize

有2个步骤：

1. 包括angular-sanitize.min.js资源，即：
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. 在一个js文件（控制器或通常app.js），包括ngSanitize，即：
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Answer 2

你也可以像这样创build一个filter：

 var app = angular.module("demoApp", ['ngResource']); app.filter("trust", ['$sce', function($sce) { return function(htmlCode){ return $sce.trustAsHtml(htmlCode); } }]); 

然后在视图中

 <div ng-bind-html="trusted_html_variable | trust"></div> 

注意 ：这个filter信任传递给它的任何和所有的html，并且如果带有用户input的variables被传递给它，可能会呈现一个XSS漏洞。

Answer 3

Angular JS在标签内显示HTML

上面的链接提供的解决scheme为我工作，这个线程没有任何选项。 对于任何正在寻找与AngularJS版本1.2.9相同的东西的人

这是一个副本：

好的，我find了解决scheme：

JS：

 $scope.renderHtml = function(html_code) { return $sce.trustAsHtml(html_code); }; 

HTML：

 <p ng-bind-html="renderHtml(value.button)"></p> 

编辑：

设置如下：

JS文件：

 angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce', function ($scope, $http, $sce) { $scope.renderHtml = function (htmlCode) { return $sce.trustAsHtml(htmlCode); }; $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; }]); 

HTML文件：

 <div ng-controller="MyController"> <div ng-bind-html="renderHtml(body)"></div> </div> 

Answer 4

幸运的是，您不需要任何奇特的filter或不安全的方法来避免该错误消息。 这是完整的实现，以预期和安全的方式在视图中正确输出HTML标记。

Angular之后必须包含清理模块：

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script> 

然后，该模块必须加载：

 angular.module('app', [ 'ngSanitize' ]); 

这将允许你从一个控制器，指令等string中包含标记：

 scope.message = "<strong>42</strong> is the <em>answer</em>."; 

最后，在模板中，它必须如下输出：

 <p ng-bind-html="message"></p> 

这将产生预期的输出： 42是答案 。

Answer 5

我今天试过了，唯一的办法就是这个

<div ng-bind-html-unsafe="expression"></div>

Answer 6

ng-bind-html-unsafe不再有效。

这是最短的方法：

创build一个filter：

 myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; }); 

在你看来：

 <div ng-bind-html="customHtml | unsafe"></div> 

PS此方法不要求您包含ngSanitize模块。

Answer 7

在html上

 <div ng-controller="myAppController as myCtrl"> <div ng-bind-html-unsafe="myCtrl.comment.msg"></div> 

要么

 <div ng-bind-html="myCtrl.comment.msg"></div 

在控制器上

 mySceApp.controller("myAppController", function myAppController( $sce) { this.myCtrl.comment.msg = $sce.trustAsHtml(html); 

也可以使用$scope.comment.msg = $sce.trustAsHtml(html);

Answer 8

我发现使用ng-sanitize不允许我在html中添加ng-click。

为了解决这个问题我添加了一个指令 喜欢这个：

 app.directive('htmldiv', function($compile, $parse) { return { restrict: 'E', link: function(scope, element, attr) { scope.$watch(attr.content, function() { element.html($parse(attr.content)(scope)); $compile(element.contents())(scope); }, true); } } }); 

这是HTML：

 <htmldiv content="theContent"></htmldiv> 

祝你好运。

Answer 9

刚刚使用ngBindHtml通过遵循angular（v1.4）文档 ，

 <div ng-bind-html="expression"></div> and expression can be "<ul><li>render me please</li></ul>" 

确保在模块的依赖项中包含ngSanitize。 那么它应该工作正常。

Answer 10

另一个解决scheme，除了使用scoped属性外，与blrbr非常相似：

 angular.module('app') .directive('renderHtml', ['$compile', function ($compile) { return { restrict: 'E', scope: { html: '=' }, link: function postLink(scope, element, attrs) { function appendHtml() { if(scope.html) { var newElement = angular.element(scope.html); $compile(newElement)(scope); element.append(newElement); } } scope.$watch(function() { return scope.html }, appendHtml); } }; }]); 

接着

 <render-html html="htmlAsString"></render-html> 

注意你可以用element.append()replaceelement.replaceWith()

Answer 11

从第四angular开始，这是现在的工作方式：

 <div [innerHTML]="htmlString"> </div> 

从这个问题在这里。

Answer 12

对于这个问题，还有一个解决方法是使用angular度创build新的属性或指令 。

产品specs.html

  <h4>Specs</h4> <ul class="list-unstyled"> <li> <strong>Shine</strong> : {{product.shine}}</li> <li> <strong>Faces</strong> : {{product.faces}}</li> <li> <strong>Rarity</strong> : {{product.rarity}}</li> <li> <strong>Color</strong> : {{product.color}}</li> </ul> 

app.js

  (function() { var app = angular.module('gemStore', []); app.directive(" <div ng-show="tab.isSet(2)" product-specs>", function() { return { restrict: 'E', templateUrl: "product-specs.html" }; }); 

的index.html

  <div> <product-specs> </product-specs>//it will load product-specs.html file here. </div> 

要么

 <div product-specs>//it will add product-specs.html file 

要么

 <div ng-include="product-description.html"></div> 

https://docs.angularjs.org/guide/directive

Answer 13

你也可以使用ng-include 。

 <div class="col-sm-9 TabContent_container" ng-include="template/custom.html"> </div> 

你可以使用“ng-show”来显示隐藏这个模板数据。

Answer 14

请参阅我在以下两个地方为您发布的答案：

http://forum.ionicframework.com/t/eval-json-data-as-html/1455/6

http://codepen.io/calendee/pen/DKhbc

Answer 15

使用

 <div ng-bind-html="customHtml"></div> 

和

 angular.module('MyApp', ['ngSanitize']); 

为此，您需要在您的html文件中包含angular-sanitize.js

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>