根据范围变化更新 class

Question

我在这里遇到了一点挑战，我无法找到任何合适的解决方案。我正在使用一个指令：

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>

该指令根据编译时的状态添加了一个class

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

现在我遇到的问题是，当我更新 ng-repeat 范围时，该指令再次执行工作，但是 classes 像这样加起来。

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

我应该注意旧值并删除它 class 但我无法使 $watch 正常工作...所以我很困惑...

感谢您的任何建议！

Answer 1

出现此问题是因为当您更新 ng-repeat 范围时，angular 不会为项目重新创建 html。所以，我看到两个选项。

1.Create 从旧对象创建新任务对象然后更改新对象的属性并用新对象替换旧对象。这使得 angular 为更新的模型对象创建一个新的 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 并开始使用 ng-class。像这样：

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

根据范围变化更新 class

Update class based on scope changes

class

angularjs

angularjs-directive

angularjs-ng-repeat