Angular filter output html

写一个页面，在显示status（只有两种值1或0）时，为了让页面好看，当status为1时显示蓝颜色的小圆圈，为0时显示红色的小圆圈；

最开始用ngClass：

<span class="circle" ng-class="{'disabled':robot.status != '1','enabled':robot.status == '1'}"></span> 

 

但是，仅仅显示个圆圈，没有title，用户不知道是啥意思，所以改用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 = '正常';
                }else{
                    scope.class = 'disabled';
                    scope.title = '异常';
                }
            }
        };
    });

但是问题又来了，因为页面有心跳包，status时可能会变化，写的directive不符合要求，gg半天也没解决问题；

于是最后用filter来解决：

 

function robotStatusClass(){
        return function(input){
            if(input == '1'){
                return '<span class="circle enabled" title="正常"></span>';
            }else{
                return '<span class="circle disabled" title="异常"></span>';
            }
        }
    }

 

没想到显示的竟然是字符串....最后gg找到了解决办法：

function robotStatusClass($sce){
        return function(input){
            if(input == '1'){
                return $sce.trustAs('html','<span class="circle enabled" title="正常"></span>');
            }else{
                return $sce.trustAs('html','<span class="circle disabled" title="异常"></span>');
            }
        }
    }
//
<p class="form-control-static pull-left"  ng-bind-html="status | robotStatusClass"></p>