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>

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

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

现在我遇到的问题是，当我更新ng-repeat范围时，指令再次完成工作，但是这样的类会加起来。

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

我应该注意旧的价值并删除这个课程，但我无法设法让$ watch正常工作......所以我很卡住......

感谢您的任何建议！

Answer 1

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

1.从旧的任务对象创建一个新的任务对象，然后更改新对象的属性，并用新的对象替换旧的对象。这使得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.或者你可以停止使用自定义指令来改变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>

根据范围更改更新类

1 个答案: