写一个页面，在显示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>
原文：http://www.cnblogs.com/sevenzhou/p/4882998.html