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

Question

我需要基于布尔值

在UI选择的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作为参数。因此，您应该使用Wether移动逻辑，以将图标显示为控制器，并使您的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完成的所有这些都是为了防止不安全的资源或某些XS注入您的应用程序。

查找此小提琴