javascript - 无法让 Angular 过滤器显示 Html 实体

Question

我正在尝试使用 Angular 在我的 MVC View 中显示“True”值的绿色复选标记和“False 值”的红十字。使用过滤器，我可以显示 unicode 检查 (u+2713) 和十字 ( u+2718)，但他们想要一个“绿色”检查和一个“红色”十字。我在我的页面上包含了 angular-sanitize.js 并尝试使用 ng-bind-html-unsafe 指令，当我执行该字段时空白。

谁能告诉我我在这里缺少什么？

这是我的 HTML 页面:

<script src="~/Scripts/app/AccordionCtrl.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<div ng-app="myModule" ng-controller="AccordionCtrl">

        <table class="table">
            <thead style="background-color:#0e438d; color:white">
                <tr>
                    <td>Company Name</td>
                    <td>City</td>
                    <td>State</td>
                    <td>System ID</td>
                    <td>Releast Status</td>
                    <td>Training Tracker</td>
                    <td>SSQ Complete</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contractor in contractors">
                    <td>{{contractor.vchCompanyName}}</td>
                    <td>{{contractor.vchOprCity}}</td>
                    <td>{{contractor.vchOprStateID}}</td>
                    <td>{{contractor.CompanyID}}</td>
                    <td>{{contractor.ReleaseStatus}}</td>
                    @*<td>{{contractor.TrainingTracker|applyMarks}}</td>*@
                    <td><span ng-bind-html-unsafe="contractor.TrainingTracker | applyMarks"></span></td>
                    <td>{{contractor.SSQComplete|applyMarks}}</td>
                </tr>
                <tr>
                    <td>&#10004</td>
                </tr>
            </tbody>

        </table>
    </div>
</div>

这是我 Controller 中的过滤器代码:

app.filter("applyMarks", function(){
    return function(input){
        if(input == true){
            //return '\u2713';
            return '&#10004';
        }
        else
        {
            return '\u2718'
        }
    };

Answer 1

ng-bind-html-unsafe 自 Angular 1.2 版本起已被弃用。

您需要使用 $sce 来清理您的 html。

标记

ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"

代码

app.filter('trustedhtml', function($sce) { 
     return $sce.trustAsHtml; 
});