Angular.js: Onchange запускаСтся ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ΄Π΅Π»ΠΈ для ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ области

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 21 ΠΎΠΊΡ‚. 2013  Β·  11ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: angular/angular.js

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ 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>
$compile forms low works as expected confusing bug

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

НаррСц, я катСгоричСски Π½Π΅ согласСн. БущСствуСт Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ€, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄, ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ двусторонняя привязка ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚. Когда Π² Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ΅ привязки вносятся измСнСния, ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ всю Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΄Π°ΠΆΠ΅ Ссли другая Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° наслСдуСтся ΠΎΡ‚ этой Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹, ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½ΠΈΠΆΠ΅ привязываСтся ΠΊ привязкС привязки ... Ссли эта модСль обновляСтся, исходная модСль области дСйствия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части стСка Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ​​в Ρ‚ΠΎΠΌ ΠΆΠ΅ Ρ†ΠΈΠΊΠ»Π΅ дайдТСста ΠΏΠ΅Ρ€Π΅Π΄ пСрСходя ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ функциям. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ оТидаСтся ΠΎΡ‚ потрСбитСля.

ВсС 11 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹ΠΉ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ случай ... 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 . БвязываниС Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ² - это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ нСзависимая концСпция. Они ΠΌΠΎΠ³ΡƒΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС, Π½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ / Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°.

#

Как ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ, Ссли Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌΡƒ Π²Ρ‹Π·ΠΎΠ²Ρƒ трСбуСтся доступ ΠΊ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ, Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²:

  1. ΠŸΠ΅Ρ€Π΅Π΄Π°ΠΉΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°.

  2. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ запускался асинхронно (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ дайдТСст закончился ΠΈ всС привязки Π±Ρ‹Π»ΠΈ распространСны), Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ $timeout Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°.

  3. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° «асинхронная» вСрсия 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()" />
Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ