从AngularJS控制器将超文本标记语言插入视图

小开

最佳答案

对于Angular 1. x，在超文本标记语言中使用ng-bind-html：

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

在这一点上，你会得到一个attempting to use an unsafe value in a safe context错误，所以你需要使用ngSanitize或$sce来解决这个问题。

$sce

在控制器中使用$sce.trustAsHtml()转换html字符串。

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

ngSanitize

一共有两个步骤：

包含angular-sanitize.min.js资源，即：

<script src="lib/angular/angular-sanitize.min.js"></script>

在js文件（控制器或通常app.js）中，包含ngSanitize，即：

angular.module('myApp', ['myApp.filters', 'myApp.services','myApp.directives', 'ngSanitize'])

小开

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

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

小开

在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);

小开

Angular JS显示标签内的超文本标记语言

上面链接中提供的解决方案对我有用，这个线程上的任何选项都没有。对于任何使用AngularJS版本1.2.9寻找同样的事情的人

这是一个副本：

我找到了解决这个问题的方法：

js：
$scope.renderHtml = function(html_code){return $sce.trustAsHtml(html_code);};
超文本标记语言：
<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>';
}]);

超文本标记语言文件：

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

小开

你也可以像这样创建一个过滤器：

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>

说明：此过滤器信任传递给它的任何和所有html，如果将带有用户输入的变量传递给它，则可能会出现XSS漏洞。

小开

我发现使用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);}}});

这是超文本标记语言：

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

祝你好运。

小开

另一个解决方案，除了使用作用域属性之外，与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()替换为element.replaceWith()

小开

幸运的是，您不需要任何花哨的过滤器或不安全的方法来避免该错误消息。这是以预期和安全的方式在视图中正确输出超文本标记语言的完整实现。

sanitize模块必须包含在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']);

这将允许您在来自控制器、指令等的字符串中包含标记：

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

最后，在模板中，它必须像这样输出：

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

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

小开

您也可以使用ng-包括。

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

您可以使用"ng-show"来显示隐藏此模板数据。

小开

对于这个问题，还有一个解决方案，使用在角度中创建新的属性或指令。

product-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>

小开

只需使用ngBindHtml按照角度（v1.4）文档执行此操作，

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

确保在模块的依赖项中包含ngSanitize。它应该工作得很好。

小开

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

这是最短的路：

创建过滤器：

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

在你看来：

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

附注：此方法不需要您包含ngSanitize模块。

小开

使用

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

和

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

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

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

小开

这是一个简单的（不安全的）bind-as-html指令，不需要ngSanitize：

myModule.directive('bindAsHtml', function () {return {link: function (scope, element, attributes) {element.html(scope.$eval(attributes.bindAsHtml));}};});

请注意，如果绑定不受信任的内容，这将打开安全问题。

像这样使用：

<div bind-as-html="someHtmlInScope"></div>

小开

这是解决方案制作这样的过滤器

.filter('trusted',function($sce) {return function(ss) {return $sce.trustAsHtml(ss)};})

并将其作为过滤器应用于ng-bind-html，如

<div ng-bind-html="code | trusted">

还要感谢Ruben Decrop

小开

使用管道的工作示例在Angular 4的模板中显示html。

1.钢管escape-html.pipe.ts

'

import { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser';@Pipe({name : 'keepHtml', pure : false})export class EscapeHtmlPipe implements PipeTransform{constructor(private sanitizer : DomSanitizer){}transform(content){return this.sanitizer.bypassSecurityTrustHtml(content);}}

'2.将管道注册到app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';declarations: [...,EscapeHtmlPipe]

在模板中使用

    <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

getDivHtml() { //can return html as per requirement}

Please add appropriate implementation for getDivHtml in associated component.ts file.

小开

只需简单地使用[innerHTML]，如下所示：

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

在您需要使用ng-bind-html之前…