【问题标题】：Show icon on ng-bind-html when value is false当值为 false 时在 ng-bind-html 上显示图标
【发布时间】：2018-05-21 09:15:59
【问题描述】：
我需要在 ui-select 的 ng-bind-html 中显示一个基于布尔值的 fontawesome 图标
<span ng-bind-html="project.IsActive == false && <i class="fa fa-ban" aria-hidden="true"></i> | highlight: $select.search"></span>
当然这段代码不起作用，它只是为了解释我需要什么，有什么想法吗？
【问题讨论】：
标签：
javascript
angularjs
font-awesome
ui-select
ng-bind-html
【解决方案1】：
Ng-bind-html 是一个指令，应该将受信任的 html 作为参数。因此，您应该移动您的逻辑，以便向控制器显示您的图标，并使您的 html 被 angulars $sce 服务信任：
let icon = $sce.trustAsHtml('<i class="fa fa-ban" aria-hidden="true"></i>');
$scope.html = !IsActive ? icon : null;
然后在视图中你会这样：
<span ng-bind-html="html"></span>
Angular 所做的所有这些都是为了防止不安全的资源或某些 xss 被注入到您的应用中。
查找此fiddle