gpt4 book ai didi

angularjs - 带有样式的 ng-bind-html 不起作用

转载 作者:行者123 更新时间:2023-12-01 12:22:17 24 4
gpt4 key购买 nike

我正在寻找如何使用 ng-bind-html 解决我的问题
作为输入,我收到例如一个带有 html 的图标

icon: '<i class="fa fa-sign-out"><i>'

这适用于 ng-bind-html:
let buttonIcon = angular.element(`<span ng-bind-html="icon"></span>`);

显示是这样的:

enter image description here

但比我尝试为 fa-icon 添加红色
icon: '<i class="fa fa-sign-out" style="color:red;"><i>'

但没有成功

所以我查看了 HTML ,似乎是 style="color:red;"不在那里。

但我不会这样显示:

(我尝试在开发工具中添加样式以查看它是否有效)

enter image description here

你好

最佳答案

使用 $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>

关于angularjs - 带有样式的 ng-bind-html 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43229598/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com