NG-класс не работает хорошо на переменной связывания, если переключается быстро, это возможно?

Question

NG-класс не работает хорошо на переменной связывания, если переключается быстро, это возможно?

0

Я столкнулся со следующей проблемой:

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

В большинстве случаев myObject.myFunction() возвращает false, но есть короткий период, когда он возвращает true.

На моей веб-странице я вижу, что класс "my-class2" добавлен в <input> правильно, но после этого класс должен быть удален, когда myObject.myFunction() снова возвращает false.

Но возникает вопрос, почему добавлен класс "my-class2", но НЕ удаляется. Класс все еще находится в дереве DOM, когда я вижу, что функция возвращает false в console.log().

Он не изменится, даже если я использую $scope.$apply() или $scope.$digest() для принудительного обновления.

Класс "my-class1" привязывается к myObject.myAttribute. У этой проблемы есть та же проблема.

Что-то еще, что меня смущает, это то, что когда true возвращается из myObject.myFunction() длится немного больше (например, 500 мс), ng-класс всегда правильно задает класс.

Любая помощь приветствуется!

Elitward 01 апр. 2016, в 02:07

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

H.jame · Answer 1 · 2016-04-01T04-47-00.000Z

Я думаю, проблема заключается в том, что как написать вам код, лучший способ вставить вам контроллер или метод; Я думаю, что это может сделать эту проблему:

в вашем коде вы только выполняете мой класс во время начала, а затем никогда не выполняете действия;
вы, возможно, сложный код, чтобы сделать так долго;
вы изменяете значение, но не привязываетесь к просмотру;

мой пример идет хорошо

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

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

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