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?
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:
<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:
<style>
.greater {
color:#D7E3BF;
background-color:#D7E3BF;
}
.less {
color:#E5B9B5;
background-color:#E5B9B5;
}
</style>
You will need to use the $compile
service, since you are working in the link
function inside the directive.
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.
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:
UPDATE:
Here is a jsfiddle with a few changes that may provide the results you want:
UPDATE 2:
I updated the fiddle again. It should now be the result you want. Same fiddle, just updated. (Use link above).