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

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/

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

How to modify directive template class name in Angular?

angularjs

glyphicons

angularjs-directive