具有样式的ng-bind-html不起作用
具有样式的ng-bind-html不起作用
提问于 2017-04-05 11:15:58
我正在寻找如何解决我的问题，用ng-bind作为输入，例如，使用html的图标。
icon: '<i class="fa fa-sign-out"><i>'这在ng-中运行得很好：
let buttonIcon = angular.element(`<span ng-bind-html="icon"></span>`);展览是这样的：
但是我想把红色添加到fa-图标中
icon: '<i class="fa fa-sign-out" style="color:red;"><i>'但没有成功
所以我看了HTML，似乎style="color:red;"不在里面。
但我不喜欢那样展示：
(我尝试在dev中添加样式。(用于检查是否有效的工具)
问候
Stack Overflow用户
回答已采纳
发布于 2017-04-05 11:31:24
使用$sce.trustAsHtml。
https://docs.angularjs.org/api/ng/service/$sce
(function(angular) {
'use strict';
angular.module('myApp', ['ngSanitize'])
.controller('ctrl', ['$scope','$sce', function($scope,$sce) {
$scope.uCanTrust = function(string){
return $sce.trustAsHtml(string);
}
$scope.Stack = '<i class="fa fa-stack-overflow" style="color:#0077dd;font-size:34px" aria-hidden="true"></i>';
$scope.icon= $sce.trustAsHtml('<i class="fa fa-stack-overflow" style="color:red;font-size:34px" aria-hidden="true"></i>');
$scope.trustme= $sce.trustAsHtml('<a href="#" style="color:red">Click Me!</a>');
}]);
})(window.angular);<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script></head>
<body ng-app="myApp">
<div ng-controller="ctrl">
<p ng-bind-html="trustme"></p>
<p ng-bind-html="icon"></p>
<p ng-bind-html="uCanTrust(Stack)"></p>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43229598
复制相关文章
相似问题
腾讯云开发者
