0

これが私のディレクティブで、最初のロードでうまくいくようです:

app.directive('myBar',function(){
        return{
            restrict: 'E',
            replace: true,
            template: '<div class="container" style="border-right:2px #9E9E9E dotted;width:102px;height:17px;"><div class="box max" style="width: {{max}}px;z-index:-1;"></div><div class="box" style="width: {{current}}px; margin-top:-20px;z-index:99999999;" ng-class="{\'greater\': current >= max, \'less\': current < max}"">{{current}}</div></div>',
            scope : {
                current: '@',
                max: '@'
            }
        };
    });

しかし、現在/最大の値を変更しようとすると、色が変わりません:

var app = angular.module('MyTutorialApp', []);
    app.controller("controller", function ($scope) {
        $scope.chargeability = [{ date: '15-Sep-13', max: 100, current: 50 },
        { date: '30-Sep-13', max: 100, current: 100 },
        { date: '15-Oct-13', max: 80, current: 50}];
        $scope.ytd = 122;
    });

最初のロードで...これは正常に機能しているようですが、maxおよび/またはcurrentの値を変更しようとすると問題が発生します...テンプレート内のng-classに従わなくなりました...

ng-class="{\'greater\': current >= max, \'less\': current < max}

私は何かが欠けていますか？問題を解決するためのアイデアを投げてくれてありがとう

4

2 に答える 2

0

current と max の値を更新するときに、おそらく $apply() を呼び出して angular にダイジェスト サイクルを実行させる必要があります。

$scope.$apply(function() {
 // update values here, for example..
 $scope.current = newCurrentVal;
 $scope.max = newMaxVal;
});
于 2013-10-25T05:17:24.573 に答える
0

あなたのコードはうまくいきます。テストするには、 を使用します$timeout。これは実際に私がやったことです：

app.controller('myCtrl', ['$scope','$timeout', function ($scope, $timeout) {
    $scope.chargeability = [{
        date: '15-Sep-13',
        max: 100,
        current: 10
    }, {
        date: '30-Sep-13',
        max: 60,
        current: 0
    }, {
        date: '15-Oct-13',
        max: 80,
        current: 10
    }];

    $scope.ytd = 122;

 var stop;
  $scope.increase = function() {
    stop = $timeout(function() {
    // console.log($scope.chargeability[0].current);
             if ($scope.chargeability[0].current < $scope.chargeability[0].max) {
                 $scope.chargeability[0].current = $scope.chargeability[0].current + 1;
              $scope.increase();
           } else {
               $timeout.cancel(stop);
             }
    }, 100);
  };
}]);



app.directive('myBar', function () {
    return {
        restrict: 'E',
        scope: {
            current: '@',
            max: '@'
        },
        template: '<div class="container" style="width:102px;height:17px;"><div class="box max" style="width: {{max}}px;z-index:-1;"></div><div class="box" style="width: {{current}}px; margin-top:-20px;z-index:99999999;" ng-class="{\'greater\': current >= max, \'less\': current < max}""></div></div>',
        replace: true
    };
});

デモPlunker

于 2013-10-25T07:10:19.573 に答える