Π‘ΠΎΠ±ΡΡΠΈΠ΅ Onchange Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΠΌΠ΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ΄Π΅Π»ΠΈ.
ΠΡΠΈΠΌΠ΅Ρ:
<!doctype html>
<html ng-app="App">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
"use strict"
var App = angular.module('App', []);
App.controller('Ctrl', function ($scope,$timeout) {
$scope.change1 = function () {
console.warn("inside change", $scope.y);
}
$scope.change2 = function () {
console.warn("inside change", $scope.x);
}
});
App.directive("wminput", function () {
return {
restrict: "E",
replace: true,
scope: {
"onChange":"&",
"value": "="
},
template: '<input type="text" data-ng-model="value" data-ng-change="onChange();">'
}
});
</script>
</head>
<body>
<div data-ng-controller="Ctrl">
"Onchange will be triggered after the model update"
<input data-ng-change="change1()" data-ng-model="y">
<br><br>
"Onchange will be triggered before the model update"
<wminput on-change="change2()" value="x"></wminput>
</div>
</body>
</html>
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ³Π»ΠΎΠ²ΠΎΠΉ ΡΠ»ΡΡΠ°ΠΉ ... http://plnkr.co/edit/lsrga8qMcbgNWATrVht3?p=preview
ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠ½ΠΊΡΠΈΡ onChange Π΄Π΅Π»Π΅Π³ΠΈΡΡΠ΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ '&'.
ΠΡ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Π½Π°Π΄ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ RAD Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ angularjs.
ΠΡΠΎ Π±ΡΠ»Π° ΡΠ΅ΡΡΠ΅Π·Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠΌΠ΅Π» ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠΎΠ·Π΄Π°Π² ΠΏΡΠΎΠΊΡΠΈ-ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ onChange.
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π°: https://studio.wavemaker.com/
Π‘ ΡΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΠΈΠ½Π°ΠΉ
ΠΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ Π²ΡΠ»ΠΎΠΆΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠΊΡΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ? ΠΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π² ΠΎΡΠ»Π°Π΄ΠΊΠ΅ ΡΡΠΎΠ³ΠΎ.
Π‘ΠΌ. ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ: http://plnkr.co/edit/Xe6ErQrg7WL6aAIoM9Gd?p=preview
ΠΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ? ΠΡΠΎ ΠΎΠΎΠΎΠΎΡΠ΅Π½Ρ Π·Π°ΠΏΡΡΠ°Π½Π½ΠΎ.
ΠΠΎΡΠ»Π΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ plnkr Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ngModel ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΡΠΎΠΊΡ Ρ Π΄Π²ΡΠΌΡ ΡΠ²ΡΠ·ΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠΎΠΌ ΠΈ ΠΎΠ±Π»Π°ΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ. Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Π΅, ngModel ΡΠ½Π°ΡΠ°Π»Π° ΠΎΠ±Π½ΠΎΠ²ΠΈΡ ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ _isolate_ ΠΈ Π·Π°ΠΏΡΡΡΠΈΡ ngChange Π² ΡΠΎΠΌ ΠΆΠ΅ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡΠ΅. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π΅ΡΠ΅ Π½Π΅ Π²Π½Π΅ΡΠ»Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΎΠ±Π»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ, ngChange Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Β«ΡΡΠ°ΡΠΎΠ΅Β» Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ x
. Π’Π΅ΠΏΠ΅ΡΡ Π½Π°Π±Π»ΡΠ΄Π°ΡΠ΅Π»Ρ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½Π΅ΠΉ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π΄Π²Π° ΡΠΈΠΊΠ»Π° Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡΠ° Π΄Π»Ρ ΡΡΠ°Π±ΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π° ngChange.
Π― ΡΠΎΠ³Π»Π°ΡΠ΅Π½, ΡΡΠΎ ΡΡΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ, Π½ΠΎ Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ, ΠΏΡΠΈΠ²ΡΠ·Π°Π² ΠΎΠ±ΡΠ΅ΠΊΡ ΠΊ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Π΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ ΠΊ ngModel. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π² ΠΎΠ±Π»Π°ΡΡΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΏΡΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ngChange: http://plnkr.co/edit/fs7S6yX1a5aeo1Ese522?p=preview
ΠΠ°ΡΡΠ΅Ρ, Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΡΠΎΠ³Π»Π°ΡΠ΅Π½. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄, ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΠΎΠ³Π΄Π° Π² ΡΠ΅ΠΏΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π²Π½ΠΎΡΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π²ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΄ΡΡΠ³Π°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Π° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΡΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ, ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ... Π΅ΡΠ»ΠΈ ΡΡΠ° ΠΌΠΎΠ΄Π΅Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ, ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ΅ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ² ΡΠΎΠΌ ΠΆΠ΅ ΡΠΈΠΊΠ»Π΅ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡΠ° ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡΠΌ. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ ΠΎΡ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ.
Π‘Π»Π΅Π³ΠΊΠ° ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΠΈ ΡΠΎΠΆΠ΅ ΡΠ±ΠΈΠ²Π°ΡΡΠΈΠ΅ Ρ ΡΠΎΠ»ΠΊΡ. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ngChange
Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΏΠΎΠ»Π΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅Ρ ngModel
, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π΄ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ $modelValue
. ΠΠ΅Π»Π°Π΅ΠΌ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΡ Π·Π°ΠΏΡΡΠ°Π½Π½ΠΎΠΉ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ $timeout
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΈ. ΠΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, Π·Π°ΡΠ΅ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ.
ΠΡΠΈΠΌΠ΅Ρ:
http://codepen.io/jakobadam/pen/qmBdrJ?editors=1010
Π‘ ΡΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π―ΠΊΠΎΠ±
ΠΡΡΡ Π»ΠΈ ΠΏΠ»Π°Π½Ρ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ ΡΡΠΎΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ? ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ½ΠΎΠ²Π° ΠΎΡΠΊΡΠΎΡΡ?
Π― ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΈ ΡΠΈΡΠ°Π» ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΈΠ·-Π·Π° ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»; Π Π΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΏΡΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΠΈ Π²ΡΠ·ΠΎΠ²Π° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π½Π° ΠΎΠ΄Π½Ρ ΠΈΡΠ΅ΡΠ°ΡΠΈΡ ΡΠ°Π½Π΅Π΅, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Π― ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡ Π²ΠΎΠΏΡΠΎΡΠ°, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎ Π΅ΡΠ΅ ΡΠ°Π·?
Π― ΡΠ°ΠΊ Π½Π΅ Π΄ΡΠΌΠ°Ρ. Π’Π΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΠΌ, ΠΈ Ρ
ΠΎΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΎΠ½ΠΎ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΆΠ΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π΅ΡΡΡ. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π±ΡΠ΄Π΅Ρ (Π°) ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ (Π±) ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ngChange
ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ _ΠΏΠ΅ΡΠ΅Π΄_ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ). ΠΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ
ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ΅Ρ
ΡΡΠ°ΡΡΠ»ΠΈΠ²ΡΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ:
Π’Π΅ΠΊΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ngChange
ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Π° Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ ngModel
. Π‘Π²ΡΠ·ΡΠ²Π°Π½ΠΈΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ² - ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅, Π½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ / Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ°Π±ΠΎΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°.
ΠΠ°ΠΊ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ, Π΅ΡΠ»ΠΈ Π²Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌΡ Π²ΡΠ·ΠΎΠ²Ρ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ²:
ΠΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π·Π°ΠΏΡΡΠΊΠ°Π»ΡΡ Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΠΎ (ΡΠΎ Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΡΡ ΠΈ Π²ΡΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π±ΡΠ»ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ), Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ $timeout
Π²Π½ΡΡΡΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Β«Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½Π°ΡΒ» Π²Π΅ΡΡΠΈΡ ngChange
, Π΅Π΅ ΡΠ°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ. (ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ, Π½ΠΎ Ρ Π±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΡΡΠΎΠ³ΠΎ.) ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
.directive('myAsyncChange', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
ctrl.$viewChangeListeners.push(function() {
$timeout(function() {
scope.$eval(attr.myAsyncChange);
});
});
}
};
});
<input ng-model="foo" my-async-change="onChange()" />
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ°ΡΡΠ΅Ρ, Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΡΠΎΠ³Π»Π°ΡΠ΅Π½. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄, ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΠΎΠ³Π΄Π° Π² ΡΠ΅ΠΏΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π²Π½ΠΎΡΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π²ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΄ΡΡΠ³Π°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Π° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΡΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ, ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ... Π΅ΡΠ»ΠΈ ΡΡΠ° ΠΌΠΎΠ΄Π΅Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ, ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ΅ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ² ΡΠΎΠΌ ΠΆΠ΅ ΡΠΈΠΊΠ»Π΅ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡΠ° ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡΠΌ. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ ΠΎΡ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ.