无法使用角度过滤器来显示Html实体

时间:2015-08-20 18:42:59

标签: javascript html angularjs angularjs-filter

我正在尝试为“真实”值显示绿色复选标记,并使用角度显示“我的MVC视图中的虚假值”。使用过滤器,我可以显示unicode检查(u + 2713)和交叉(你+ 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>

这是我的控制器中的过滤器代码:

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

1 个答案:

答案 0 :(得分:0)

自角度1.2版本以来,

ng-bind-html-unsafe已被弃用。

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

<强>标记

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

<强>代码

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