ng-Klasse nicht in einer Richtlinie arbeiten

Question

Ich habe versucht, eine Richtlinie zu erstellen:

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

und ng-Klasse funktioniert nicht. Irgendwelche Gedanken, warum es nicht funktioniert oder können Sie einen anderen Weg vorschlagen, es zu tun?

Dies ist mein 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; 
}); 

und hier ist der HTML-Körper:

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

Ich möchte diese Art im ng-Klasse erreichen:

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

Answer 1

Sie w Sie müssen den $compile Dienst verwenden, da Sie in der link Funktion innerhalb der Direktive arbeiten.

Sobald Sie die link Funktion getroffen, wird das DOM bereits gebaut, und Winkel wird nicht von irgendwelchen Änderungen bewusst sein, Sie in der link Funktion auf das DOM machen, wenn Sie die Änderungen durch den $compile Dienst ausführen.

Versuchen Sie, diese (nicht getestet):

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

Hier ist ein Beispiel jsfiddle die $compile innerhalb einer Richtlinie link Funktion verwendet:

Fiddle

UPDATE:

Hier ist ein jsfiddle mit einige Änderungen, die die gewünschten Ergebnisse liefern können:

Fiddle

UPDATE 2:

ich die Geige wieder aktualisiert. Es sollte jetzt das gewünschte Ergebnis sein. Gleiche Geige, gerade aktualisiert. (Benutze den Link oben).