ngのクラスは、私はディレクティブを作成しようとしたディレクティブ

Question

内部の作業ではありません。なぜそれが動作していないか、あなたはそれを行う別の方法を提案することができますか？

これは私のコントローラである：

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-クラスでこのスタイルを実現したいと思います：

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

Answer 1

あなたはディレクティブ内のlink関数で作業しているため、$compileサービスを使用する必要があります。あなたは$compileサービスを経由して、変更を実行しない限り、

あなたがlink機能を打ったら、DOMがすでに構築されており、角度は、あなたがlink関数内DOMに加えた変更を認識しません。

は（未テスト）これを試してみてください：

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

は、ここでディレクティブlink関数内$compileを使用する例のjsfiddleです：

Fiddle

UPDATE：ここ

が持つjsfiddleですあなたが望む結果を提供するいくつかの変更点：

Fiddle

UPDATE 2：

私は再びフィドルを更新しました。今はあなたが望む結果になるはずです。同じフィドル、ちょうど更新されました。 （上記のリンクを使用してください）。