javascript - 尝试通过指令更新模型但无法添加类

Question

我正在尝试更新用户看到的内容以及指令中 $scope.project 变量中包含的内容，但遇到了严重的问题。起初，我能够更新 View ，但模型无法更新。现在，我可以更新模型，但 View 不会更新。

如果我在更改模型后尝试调用 scope.$apply(); ，我会收到一条错误消息，表明摘要/应用已经在运行，并且我得到的输出是通常情况下的两倍请参阅 ng-repeat，但该类实际上已添加到 View 中(仅在重复的部分上)并更改其颜色。如果不清楚，我可以上传屏幕截图。

这是指令:

.directive('colorByChange', function(){
    return {
        scope: {test: '=passedValue', parent: '=parent', i: '=i'},
        link: function(scope, element){
            element.ready(function(){
                    if (scope.test == undefined){
                        return;
                    }
                    var change;
                    if (scope.test.changed) {
                        change = scope.test.changed;
                        scope.parent[scope.i] = scope.test.val;
                        if (change) {
                            switch (change) {
                                case 'ADDED':
                                    element.addClass('greenify');
                                    break;
                                case 'DELETED':
                                    element.addClass('redify');
                                    break;
                                case 'UPDATED':
                                    element.addClass('bluify');
                                    break;
                                default:
                                    element.addClass('NotWORKING');
                            }
                        }
                        scope.$apply();
                    }
            });
        }
    }
});

这是 html:

<td>
  <span ng-repeat="keyword in brand.keywords" color-by-change passed-value="keyword" parent="brand.keywords" i="$index">
    <span ng-hide="keyword.changed">{{keyword}} </span>
    <span ng-show="keyword.changed">{{keyword.val}} </span>
  </span>
</td>  

这是生成的 html:

<td><!-- ngRepeat: keyword in brand.keywords -->
  <span ng-repeat="keyword in brand.keywords" color-by-change="" passed-value="keyword" parent="brand.keywords" i="$index" class="ng-scope ng-isolate-scope"><span ng-hide="keyword.changed" class="ng-binding" aria-hidden="false">aa </span><span ng-show="keyword.changed" class="ng-binding ng-hide" aria-hidden="true"> </span></span><!-- end ngRepeat: keyword in brand.keywords -->
  <span ng-repeat="keyword in brand.keywords" color-by-change="" passed-value="keyword" parent="brand.keywords" i="$index" class="ng-scope ng-isolate-scope">
  <span ng-hide="keyword.changed" class="ng-binding" aria-hidden="false">hey </span>
  <span ng-show="keyword.changed" class="ng-binding ng-hide" aria-hidden="true"> </span></span><!-- end ngRepeat: keyword in brand.keywords -->
  <span ng-repeat="keyword in brand.keywords" color-by-change="" passed-value="keyword" parent="brand.keywords" i="$index" class="ng-scope ng-isolate-scope"><span ng-hide="keyword.changed" class="ng-binding" aria-hidden="false">aa </span><span ng-show="keyword.changed" class="ng-binding ng-hide" aria-hidden="true"> </span></span><!-- end ngRepeat: keyword in brand.keywords -->
  <span ng-repeat="keyword in brand.keywords" color-by-change="" passed-value="keyword" parent="brand.keywords" i="$index" class="ng-scope ng-isolate-scope greenify"><span ng-hide="keyword.changed" class="ng-binding ng-hide" aria-hidden="true">{"val":"hey","changed":"ADDED"} </span>
  <span ng-show="keyword.changed" class="ng-binding" aria-hidden="false"> hey</span></span><!-- end ngRepeat: keyword in brand.keywords --></td>

Answer 1

尝试使用 ng-class 而不是指令:

<td>
    <span ng-repeat="keyword in brand.keywords" ng-class="{'greenify': keyword.changed == 'ADDED', 'redify': keyword.changed == 'DELETED', 'bluify': keyword.changed == 'UPDATED', 'NotWORKING': keyword.changed != 'DELETED' && keyword.changed != 'ADDED' && keyword.changed != 'UPDATED'}">
        <span ng-hide="keyword.changed">{{keyword}} </span>
        <span ng-show="keyword.changed">{{keyword.val}} </span>
    </span>
</td>