如何修改Angular中的指令模板类名？

Question

这里是jsfiddle。
HTML：

<div ng-app="app"> 
    <my-checkbox text="apple" status=true></my-checkbox> 
    <my-checkbox text="pineapple" status=false></my-checkbox> 
    <my-checkbox text="peach" status=true></my-checkbox> 
</div> 

JS：

angular.module("app", []) 
.directive("myCheckbox", function(){ 
    return { 
     restrict: "E", 
     scope: true, 
     link: function(scope, ele, attr){ 
      var iconChecked = "glyphicon-ok-sign"; 
      var iconUnChecked = "glyphicon-remove-sign"; 
      scope.icon = attr.status ? iconChecked : iconUnChecked; 
      scope.name = attr.text; 
      ele.bind("click", function() { 
       attr.status = !attr.status; 
      }); 

    }, 
     template: "<div><span><i class='glyphicon {{icon}}'></i><span>{{name}}</span></span></div>" 
    }; 
}); 

，当我点击它的图标不会改变。我做错了什么？有人帮忙？
干杯！

Answer 1

对于初学者来说，如果你想改变的属性值，使用attr.$set，如

ele.on('click', function() { // seriously, why does everyone use bind? 
    attr.$set('status', !attr.status); 
}); 

其次，你应该观察状态属性更新范围的icon以及手动触发摘要由于DOM事件（如click）不这样做

var iconChecked = "glyphicon-ok-sign"; 
var iconUnChecked = "glyphicon-remove-sign"; 

attr.$observe('status', function(status) { 
    if (typeof status === 'string') { 
     status = scope.$eval(status); 
     attr.$set('status', status); 
    } 
    scope.icon = status ? iconChecked : iconUnChecked; 
}); 

scope.name = attr.text; 
ele.on("click", function() { 
    attr.$set('status', !attr.status); 
    scope.$apply(); 
}); 

http://jsfiddle.net/tL9hfmpo/5/