5

我尝试创建一个指令：

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>
4

1 回答 1

4

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

一旦你点击了这个link函数，DOM 就已经构建好了，并且 Angular 不会知道你对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 ：

小提琴

更新：

这是一个 jsfiddle，有一些更改可能会提供您想要的结果：

小提琴

更新 2：

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

于 2013-10-24T14:56:24.003 回答