Question

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

如果我在更改模型后尝试调用scope.$apply();，我会收到一个错误，表明摘要/应用已经在运行，我得到的输出是我通常在ng-repeat中看到的两倍，但是class实际上被添加到视图中（仅在重复的部分上）并更改其颜色。如果这不清楚，我可以上传截图。

这是指令：

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

试图通过指令更新模型但不能添加类

1 个答案: