ng-Klasse funktioniert nicht gut auf der Binding-Variable, wenn schnell umgeschaltet, ist das möglich?

Question

ich folgendes Problem bin vor:

<input 
    type = "text" 
    class = "class1 class2" 
    placeholder = "Type here..." 
    autocomplete = "off" 
    ng-model = "searchKeyword" 
    name = "searchId" 
    ng-class = "{'my-class1': myObject.myAttribute,'my-class2': myObject.myFunction()}" //<-- HERE IS THE PROBLEM 
    ng-disabled = "myObject.myFunction()" 
    ng-change = "searchConditionChanged()" numbers-only /> 

meisten Zeit myObject.myFunction() falsch zurück, aber es ist nur eine kurze Zeit, dass es wahr zurückgibt.

Auf meiner Webseite kann ich sehen, dass die Klasse "my-class2" korrekt zu <input> hinzugefügt wird, aber danach sollte die Klasse entfernt werden, wenn myObject.myFunction() wieder false zurückgibt.

Aber die Frage ist, warum die "my-class2" -Klasse hinzugefügt wird, aber NICHT entfernt. Die Klasse ist immer noch in der DOM-Struktur, wenn ich die Funktion sehe, die in console.log() false zurückgibt.

Es wird sich nicht ändern, auch wenn ich $scope.$apply() oder $scope.$digest() erzwinge Update zu erzwingen.

Klasse "my-class1" bindet an myObject.myAttribute. Es hat das gleiche Problem.

Etwas anderes, das mich sehr verwirrt, ist, dass, wenn wahr von myObject.myFunction() dauert ein wenig länger (wie 500ms), ng-Klasse immer richtig gesetzt Klasse.

Jede Hilfe wird geschätzt!

Answer 1

Ich denke, das Problem ist, dass, wie Sie Code schreiben, der beste Weg, Sie Controller oder Methode einfügen; glaube ich dies vielleicht dieses Problem machen:

1. in Ihnen Code, nur meine Klasse auf Startzeit handeln, und dann nie Aktion;
2. Sie Code vielleicht komplex so viel machen die Periode so lang;
3. Sie ändern den Wert, aber binden nicht an Ansicht;

mein Beispiel gut geht

\t \t var app = angular.module('myApp', []).controller('haha', function ($scope, $timeout) { 
 
\t \t \t $scope.user = { 
 
\t \t \t \t name: 'admin' 
 
\t \t \t }; 
 
\t \t \t $timeout(function loop() { 
 
\t \t \t \t \t if ($scope.user.name) { 
 
\t \t \t \t \t \t $scope.user.name = ''; 
 
\t \t \t \t \t \t console.log($scope.user.name); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t $scope.user.name = 'admin'; 
 
\t \t \t \t \t \t console.log($scope.user.name); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t $timeout(loop, 5) 
 
\t \t \t \t }, 5) 
 
\t \t })

.r { 
 
\t \t \t color: red; 
 
\t \t \t font-size: 30px; 
 
\t \t } 
 
\t \t 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="haha"> 
 
\t \t <div ng-class="{'r':user.name}">{{user.name}}</div> 
 
</div>