angularjs – ng-class在指令中不起作用

发布时间：2020-12-17 10:26:18 所属栏目：安全来源：网络整理

导读：我尝试创建一个指令： app.directive('barsCurrent',function () { return { restrict: 'E',link: function postLink(scope,element,attrs) { attrs.$observe('value',function (newValue) { // value attribute has changed,re-render var value = Number(n

我尝试创建一个指令：

app.directive('barsCurrent',function () {
    return {
        restrict: 'E',link: function postLink(scope,element,attrs) {
            attrs.$observe('value',function (newValue) {
                // value attribute has changed,re-render              
                var value = Number(newValue);
                var dval = value / 3;
                element.children().remove();
                while (dval > 0) {
                    element.append('<div id="bar" ng-class="{true: 'greater',false: 'less'}[charge.current >= charge.max]" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>')
                    dval--;
                }
            });
        }
    };
});

并且ng-class不起作用.任何想法为什么它不起作用或你能建议另一种方式来做到这一点？

这是我的控制器：

app.controller("controller",function ($scope) {
    $scope.chargeability = [{ date: '15-Sep-13',max: 100,current: 100 },{ date: '30-Sep-13',max: 60,current: 50 },{ date: '15-Oct-13',max: 80,current: 20 }];
    $scope.ytd = 122;
});

这是html正文：

<div ng-repeat="charge in chargeability">
 <bars-current style="z-index:999999;" value="{{charge.current}}">current:{{charge.current}}</bars-current>
<div style="clear:both;height:6px;"></div>

我想在ng-class中完成这种风格：

<style>
.greater {
    color:#D7E3BF;
    background-color:#D7E3BF;
}
.less {
    color:#E5B9B5;
    background-color:#E5B9B5;
}
</style>

您将需要使用$compile服务,因为您正在使用指令内的link函数.

一旦你点击链接功能,DOM就已经构建完成了,除非你通过$compile服务运行更改,否则angular不会知道你对链接函数中的DOM所做的任何更改.

试试这个(未经测试)：

app.directive('barsCurrent',function ($compile) {
    return {
        restrict: 'E',re-render              
                var value = Number(newValue);
                var dval = value / 3;
                element.children().remove();
                while (dval > 0) {
                    var newDom = '<div id="bar" ng-class="{true: 'greater',false: 'less'}[charge.current >= charge.max]" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>'
                    element.append($compile(newDom)(scope));
                    dval--;
                }
            });
        }
    };
});

这是一个在指令链接函数中使用$compile的示例jsfiddle：

Fiddle

更新：

这是一个jsfiddle,有一些可能提供你想要的结果的变化：

Fiddle

更新2：

我再次更新了小提琴.它现在应该是你想要的结果.同样的小提琴,刚刚更新. (使用上面的链接).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!