Javascript 试图通过指令更新模型，但无法添加类

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

如果我尝试调用

scope.$apply（）更改模型后，我得到一个错误，即摘要/应用程序已经在运行，并且我从ng repeat中通常看到的输出中获得了两倍的输出，但是该类实际上被添加到视图中（仅在复制的部分上）并更改其颜色。如果这还不清楚，我可以上传一个截图

以下是指令：

.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();
                    }
            });
        }
    }
});

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

以下是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>  


{{关键字}}
{{关键字.val}}

以下是生成的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>


aa
嘿
aa
{“val”：“嘿”，“更改”：“添加”}
嘿
尝试使用
ng类
代替指令：

.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();
                    }
            });
        }
    }
});

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


{{关键字}}
{{关键字.val}}
尝试使用
ng类
代替指令：

.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();
                    }
            });
        }
    }
});

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


{{关键字}}
{{关键字.val}}
不要使用
$。apply（）
，对要更改视图的变量使用
$watch
。因此，如果我对变量使用$watch，angular将看到更改并自动更新所有内容？我不明白这为什么能解决这个问题。有点像
$watch（variableiaminterseed，function（）{//根据变化做一些事情，这些变化会被反映出来}
。只要浏览一下AngulrJS$watch文档，你就会明白。但是，我感兴趣的是向元素添加一个类并更新模型中的值。我需要获取一个对象，根据参数添加一个类，然后将该对象从其值参数转换为字符串。因此，元素的颜色需要在视图中更改，而基础值需要在值中更改。我仍然不知道$watch在这方面有什么帮助。如果可以，请创建一个JSFIDLE。不要使用
$.apply（）
，在要更改视图的变量上使用
$watch
。因此，如果我在变量上使用$watch，angular将看到更改并自动更新所有内容？我不明白为什么会解决此问题。类似于
$watch（variableiamintersed，function（））{//根据变化做事情，这些变化会被反映出来}
。只要浏览一下AngulrJS$watch文档，你就会明白。但是，我感兴趣的是向元素添加一个类并更新模型中的值。我需要获取一个对象，根据参数添加一个类，然后将该对象从其值参数转换为字符串。因此，元素的颜色视图需要更改，基础值需要更改。我仍然不知道$watch在这方面会有什么帮助。如果您可以创建一个JSFIDLE。问题是，当对象具有。
更改了
属性时，我将基础值从对象更改为字符串，那么它不会丢失类吗？@DaveM-我想不会，因为
ngClass
表达式正在检查来自对象的值，而不是字符串。好的，我有点明白你的意思，问题是我想实际更改模型，以便
keyword==={changed:'Update'，val:'I am a keyword'}
，更改为
关键字==='我是一个关键字'
。我明白了。所以您确实需要该指令，但我认为因为您正在更改模型，它将影响
ngRepeat
循环。也许您应该尝试：
ng repeat=“keyword in:：brand.keywords”
防止您的directiveBrilliant更新视图！这是一个完美的解决方案-谢谢。我添加了$timeout方法、单向绑定和ng类思想，现在它可以工作了！我不需要更新我所在的页面（从用户输入），这样就行了！如果我被困在双向绑定中，我想这仍然会让我头疼。问题是，当对象具有.
changed
属性时，我将底层值从对象更改为字符串，这样它不会丢失类吗？@DaveM-我想不会，因为
ngClass
表达式正在检查值好吧，我有点明白你的意思，问题是我想实际更改模型，以便
keyword==={changed:'Update'，val:'I am a keyword'}
，更改为
关键字==='我是一个关键字'
。我明白了。所以您确实需要该指令，但我认为因为您正在更改模型，它将影响
ngRepeat
循环。也许您应该尝试：
ng repeat=“keyword in:：brand.keywords”
防止您的directiveBrilliant更新视图！这是一个完美的解决方案-谢谢。我添加了$timeout方法、单向绑定和ng类思想，现在它可以工作了！我不需要更新我所在的页面（从用户输入），这样就行了！我想如果我被困在双向绑定中，这仍然会让我头疼。