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

Question

我需要在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>

当然这段代码不起作用，它只是解释我需要什么，有关如何做的任何想法？

Answer 1

Ng-bind-html是一个指令，应该将受信任的html作为参数。所以，你应该移动你的逻辑以向控制器显示你的图标，并通过角度$sce服务使你的html受信任：

let icon = $sce.trustAsHtml('<i class="fa fa-ban" aria-hidden="true"></i>');
$scope.html = !IsActive ? icon : null;

然后在视图中你会像：

<span ng-bind-html="html"></span>

所有这些都是通过角度来完成的，以防止将不安全的资源或某些xss注入您的应用程序。

查看此fiddle