Класс обновления, основанный на изменениях области видимости

Question

Im сталкивается с небольшим вызовом здесь, и я не могу найти подходящего решения. Im используя директиву:

app.directive('colorcode', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      attrs.$observe('colorcode', function(data) { 
       var status = attrs.colorcode.replace(/ /g, '_'); 
       element.addClass(status + "_status"); 
      }, true); 
     } 
    } 
}); 

применить цвет фона на основе состояния данных, поступающих из JSon вызова.

в HTML это выглядит следующим образом:

<div ng-repeat="(key, value) in entTask[0].tasks"> 
    <h5>{{key}}</h5> 
    <div class="progress"> 
    <div class="progress-bar" colorcode="{{value.status}}"> 
     <span>{{value.status}}</span> 
    </div> 
    </div> 
</div> 

директива добавляет класс на основе состояния при компиляции

<div class="progress-bar status1" colorcode="{{value.status}}"> 

Теперь проблема у меня есть, что, когда я обновляю ng- repeat, директива снова выполняет работу, но классы добавляются таким образом.

<div class="progress-bar status1 status2 ..." colorcode="{{value.status}}"> 

Я должен следить за старое значение и удалить этот класс, но я не могу управлять, чтобы сделать $ часовую работу правильно ... Так что Im совсем застрял ...

Спасибо за любые советы!

Answer 1

Проблема возникает из-за того, что когда вы обновляете область ng-repeat, угловая не создает повторно html для элементов. Итак, я вижу два варианта.

1.Создайте новый объект задачи из старого, затем измените свойство нового объекта и замените старый на новый. Это делает угловым создание нового объекта DOM для обновленного объекта модели. Что-то вроде этого:

$scope.change = function(index) { 
    var copy = angular.copy($scope.entTask[0].tasks[index]); 
    $scope.tasks[index].status = "new status"; 
    $scope.entTask[0].tasks[index] = copy; 
}; 

2.Or вы можете прекратить использование пользовательской директивы изменить CSS и начать использовать нг-класс. Что-то вроде этого:

// in the controller 
$scope.convertToClassName = function (status) { 
    // convert to a proper class name 
    return convertedStatus; 
}; 

// on the view 
<div class="progress-bar" ng-class="convertToClassName(value.status)"> 
    <span>{{value.status}}</span> 
</div>