Forum PHP.pl

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: watch

Forum PHP.pl > Forum > Po stronie przeglądarki

smiady

22.12.2015, 18:36:10

Witam.

Ostatnio spotkałem się z dziwnym przypadkiem.

Kod jest całościowy, więc można skopiować i przetestować na swoim (potrzebny jest jeszcze plik angular.js)

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf8" />
		<title>watch</title>
	</head>
	<body>
		<div ng-app="app">
			<div ng-controller="WatchCtrl">
				<table>
					<tr>
						<th>
							<label for="firstName">firstName</label>
						</th>
						<td>
							<input id="firstName" ng-model="firstName" />
						</td>	
					</tr>
					<tr>
						<td colspan="2">
							<button ng-click="fire()">Fire!</button>
						</td>	
					</tr>
				</table>
			</div>
		</div>
 
		<script type="text/javascript" src="angular.js"></script>
		<script type="text/javascript">
			var module = angular.module('app', []);
 
			module.controller('WatchCtrl', function($scope) {
				$scope.firstName = '';
 
				$scope.stop = true;
 
				$scope.$watch('firstName', function(newValue, oldValue) {
					if(!$scope.stop) {
						console.log('works!');
					}	
				});
 
				$scope.fire = function() {
					$scope.stop = true;
					$scope.firstName = 'change';
					$scope.stop = false;
				};
			});
		</script>
	</body>
</html>
[HTML] pobierz, plaintext

Zastanawia mnie jak po odpaleniu fire wywali mi konsole works! jak przecież przy zmianie scopa na change mam nałożoną blokadę w postaci zmiennej stop. !?

Rochu

24.12.2015, 12:33:33

$watch odpali Ci sie zawsze po zmianie wartosci firstName, co do funkcji fire to ta funkcja WYKONA SIE OD POCZATKU DO KONCA, a dopiero potem - jezeli przez w tej funkcji nastapi zmiana wartosci firstName to odpali sie watch, wiec majac cos takiego:

[HTML] pobierz, plaintext 
				$scope.fire = function() {
					$scope.stop = true;
					$scope.firstName = 'change';
					$scope.stop = false;
				};
[HTML] pobierz, plaintext

po wykonaniu funkcji fire zmienna $scope.stop zawsze bedzie miala wartosc false

-----
Proste wytlumaczenie jak odpalaja Ci sie funkcje:

Poczatkowo pole masz puste, np. wpiszesz 1 znak -> odpali sie $watch, wpiszesz drugi znak -> odpali sie $watch itd. ($scope. stop jest domyslnie ustawiony na true, wiec nie wyrzuci Ci nic do konsoli)
Klikajac na przycisk odpalisz funkcje fire() -> wykona sie ona cala, czyli za kazdym razem po zakonczeniu wykonania funkcji fire() $scope.stop bedzie mialo wartosc false
Po tym wykona sie $watch i wtedy juz wyswietli Ci w konsoli wiadomosc -> kazda kolejna zmiana w polu spowoduje to samo, gdyz $scop.stop juz caly czas bedzie mialo wartosc false

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.