当值为 false 时在 ng-bind-html 上显示图标

Question

我需要根据布尔值

在 ui-select 上的 ng-bind-html 中显示一个很棒的字体图标

<span  ng-bind-html="project.IsActive == false && <i class="fa fa-ban" aria-hidden="true"></i> | highlight: $select.search"></span>

当然这段代码不起作用，它只是为了解释我需要什么，知道如何做吗？

Answer 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

Show icon on ng-bind-html when value is false