1
這裏是jsfiddle。
HTML:如何修改Angular中的指令模板類名?
<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>"
};
});
,當我點擊它的圖標不會改變。我做錯了什麼?有人幫忙?
乾杯!
真的真的真的APPR eciate爲你的真棒答案。你不僅要知道問題本身,還要知道一些相關的問題。非常感謝! – nich
我發現一個問題,爲什麼所有圖標在開始時都是相同的。在jsfiddle中,第二個圖標應該是「刪除」風格而不是「ok」風格。 – nich
@nich啊,那是因爲屬性值是字符串,除非被分析/評估。我添加了一個將初始字符串值轉換爲布爾值的檢查 – Phil