顏色沒有變化基礎上的電流/值最大

Question

這是我的指令，它似乎在第一負載正常工作：

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

第一次加載......這似乎是工作的罰款，但是當我試圖改變最大的價值和/或電流......它不再跟隨存在問題ng模板內...

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

我缺乏什麼？謝謝你拋出一個想法來解決問題

Answer 1

你可能需要調用$適用（）來強制的角度做一個摘要週期，當你更新的電流值和最大

$scope.$apply(function() { 
// update values here, for example.. 
$scope.current = newCurrentVal; 
$scope.max = newMaxVal; 
}); 

Answer 2

您的代碼運行良好。要測試它使用$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