如何修改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/