ng sınıf I bir direktif oluşturma çalıştı bir direktif

Question

içinde çalışmıyor:

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

ve ng sınıfı çalışmıyor. Neden çalışmadığı ya da bunu yapmanın başka bir yolunu önerebilir misiniz?

Bu

benim denetleyicisi geçerli:

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

ve burada html organıdır:

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

Ben ng-sınıfında bu tarzı başarmak istiyoruz

:

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

Answer 1

Siz w Yönerge içinde link işlevinde çalıştığınızdan, $compile hizmetini kullanmanız gerekir.

Eğer link fonksiyonunu vurmak sonra, DOM zaten inşa ve $compile hizmet aracılığıyla değişiklikleri çalıştırmak sürece, link işlevi içinde DOM yaptığınız tüm değişikliklerden haberdar olmayacaktır açısal edilir.

bu (denenmemiş) deneyin: İşte

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

bir direktif iç link fonksiyonunu $compile kullanan bir örnek jsfiddle var:

Fiddle

GÜNCELLEME: Burada

ile jsfiddle olduğunu İstediğiniz sonuçları sağlayabilecek birkaç değişiklik:

Fiddle

GÜNCELLEME 2: Tekrar keman güncellenmiş

. Şimdi istediğin sonuç olmalı. Aynı keman, yeni güncellendi. (Yukarıdaki bağlantıyı kullanın).