ng-class在指令中不起作用

I tried creating a directive:

我尝试创建一个指令:

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--;
                }
            });
        }
    };
});

and ng-class is not working. Any thoughts why it is not working or can you suggest another way to do it?

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

This is my controller:

这是我的控制器:

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;
});

and here is the html body:

这是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>

I would like to accomplish this style in the ng-class:

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

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

1 个解决方案

#1

You will need to use the $compile service, since you are working in the link function inside the directive.

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

Once you hit the link function, the DOM is already built, and angular will not be aware of any changes you make to the DOM inside the link function, unless you run the changes through the $compile service.

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

Try this (untested):

试试这个(未经测试):

app.directive('barsCurrent', function ($compile) {
    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) {
                    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--;
                }
            });
        }
    };
});

Here's an example jsfiddle that uses $compile inside a directive link function:

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

Fiddle

UPDATE:

Here is a jsfiddle with a few changes that may provide the results you want:

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

Fiddle

UPDATE 2:

I updated the fiddle again. It should now be the result you want. Same fiddle, just updated. (Use link above).

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