[英]AngularJS v1.4.2 ng-bind-html and ng-bind-html-unsafe don't work
I'm using AngularJS v1.4.2 and like to print out html from a variable in the $scope
. 我正在使用AngularJS v1.4.2并喜欢从
$scope
的变量打印出html。
I tried to use ng-bind-html
and ng-bind-html-unsafe
but both are not working. 我试图使用
ng-bind-html
和ng-bind-html-unsafe
但两者都不起作用。
Here is my controller: 这是我的控制器:
var ctrl = angular.module('app.ctrl',['app.model'])
.controller('Controller',function($scope, $log, Model){
$log.warn("controller für View wurde erstellt");
$log.log(Model.getValue());
$scope.sayHello="Hello World!";
$scope.sayHelloHtml="<strong>Hello World Fett</strong>";
});
And my HTML code: 我的HTML代码:
...
<div ng-controller="Controller">Meine erste angularJS View {{ sayHello }}
<div ng-bind="sayHello"></div>
<div ng-bind-html="sayHelloHtml"></div>
</div>
...
var ctrl = angular.module('app.ctrl',['app.model','ngSanitize'])
.controller('Controller',function($scope, $log, Model,'$sce'){
$log.warn("controller für View wurde erstellt");
$log.log(Model.getValue());
$scope.sayHello="Hello World!";
$scope.sayHelloHtml="<strong>Hello World Fett</strong>";
$scope.sayHelloHtml = $sce.trustAsHtml($scope.sayHelloHtml);
});
HTML HTML
<div ng-controller="Controller">Meine erste angularJS View {{ sayHello }}
<div ng-bind="sayHello"></div>
<div ng-bind-html="sayHelloHtml"></div>
<div ng-bind-html-unsafe="sayHello"></div>
</div>
Make sure you have include angular-sanitize.js and injected ngSanitize module in app and injected $sce in your controller. 确保在app中包含angular-sanitize.js和注入的ngSanitize模块,并在控制器中注入$ sce 。
It's necessary to use the $sce ( Strict Contextual Escaping service ) 有必要使用$ sce( Strict Contextual Escaping服务 )
$scope.sayHelloHtml = $sce.trustAsHtml(" Hello World Fett "); $ scope.sayHelloHtml = $ sce.trustAsHtml(“ Hello World Fett ”);
according to the docs for ng-bind-html you need to add ngSanitize to your module dependencies for it to work correctly, which looks like you didn't ;) 根据ng-bind-html的文档,您需要将ngSanitize添加到模块依赖项中才能使其正常工作,看起来您没有;)
Check the example on https://docs.angularjs.org/api/ng/directive/ngBindHtml for further details. 有关详细信息, 请查看https://docs.angularjs.org/api/ng/directive/ngBindHtml上的示例。
Cheers D 干杯D.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.