Question

我尝试创建一个指令：

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>

Answer 1

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

一旦你点击了link函数，DOM就已经构建了，而且角度不会知道你对link函数中的DOM所做的任何更改，除非你通过$compile服务。

试试这个（未经测试）：

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

以下是在指令$compile函数中使用link的示例jsfiddle：

Fiddle

更新：

这是一个jsfiddle，其中包含一些可能提供所需结果的更改：

Fiddle

更新2：

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

ng-class在指令中不起作用

1 个答案: