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).