Angular Filter Output HTML

Write a page that shows the status (only two values 1 or 0), in order to make the page look good, when the status is 1 o'clock shows a small circle of blue color, to show a small red circle of 0 o'clock;

Start with Ngclass:

However, just display a circle, no title, the user does not know what the meaning, so instead of Directive:

App.directive (' Robotstatusclass ', function () {        return {            restrict: "A",            require: ' ^ngmodel ',            scope:{                Status: ' =ngmodel '            },            Template: ' <span class= ' Circle ' ng-class= ' class ' title= ' {{status}} ' ></span > ',            link:function (scope) {                if (scope.status = = ' 1 ') {                    scope.class = ' enabled ';                    Scope.title = ' normal ';                } else{                    scope.class = ' disabled ';                    Scope.title = ' exception ';}};    });

But the problem comes again, because the page has heartbeat package, status may change, write directive not meet the requirements, GG half a day did not solve the problem;

Finally, the filter is used to solve:

function Robotstatusclass () {        return function (input) {            if (input = = ' 1 ') {                return ' <span class= "circle Enabled "title=" normal "></span>";            } else{                return ' <span class= ' circle disabled ' title= ' exception ' ></span> ';            }        }    }

Did not expect to show is actually a string .... Finally GG found a solution:

function Robotstatusclass ($SCE) {        return function (input) {            if (input = = ' 1 ') {                return $sce. Trustas (' HTML ', ' <span class= "Circle Enabled" title= "normal" ></span> ");            } else{                return $SCE. Trustas (' HTML ', ' <span class= ' circle disabled ' title= ' exception ' ></span> ');}}}    
//
<p class= "form-control-static pull-left" ng-bind-html= "status | Robotstatusclass "></p>

　　

　　

Angular Filter Output HTML