Angular.js: 격리 범위에 대한 모델 업데이트 전에 Onchange가 트리거됩니다.

에 만든 2013년 10월 21일 · 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

출처

vinayk406

가장 유용한 댓글

Narretz, 전적으로 동의하지 않습니다. 양방향 바인딩이 우선하는 코드를 사용하는 개발자와 체결 한 계약이 있습니다. 바인딩 체인을 따라 어디에서나 변경이 이루어지면 계속하기 전에 전체 체인을 업데이트해야합니다. 따라서 다른 지시문이이 지시문에서 상속되고 더 아래쪽에있는 것이 바인딩의 바인딩에 바인딩 되더라도 ... 해당 모델이 업데이트되면 스택 맨 아래에있는 원래 컨트롤러 범위 모델은 이전에 동일한 다이제스트 주기로 업데이트되어야합니다. 다른 기능을 계속합니다. 소비자로부터 기대되는 것입니다.

Suamere 에 2016년 10월 31일

👍20

모든 11 댓글

재미있는 코너 케이스 ... http://plnkr.co/edit/lsrga8qMcbgNWATrVht3?p=preview

이는 onChange 함수가 부모 범위 너비 '&'바인딩에 위임 된 경우에만 발생합니다.

Narretz 에 2014년 06월 25일

우리는 angularjs를 기반으로 RAD 도구를 개발하고 있습니다.
이것은 애플리케이션의 모든 위젯에 isolateScope가 있으므로 주요 버그였습니다.
onChange에 대한 프록시 메소드를 생성하여 문제를 해결했습니다.

https://studio.wavemaker.com/을 보세요

감사합니다, Vinay

vinayk406 에 2014년 06월 25일

이 프록시의 예와 사용 방법을 게시 할 수 있습니까? 이것을 디버깅하는 데 도움이 될 수 있습니다.

Narretz 에 2014년 06월 25일

http://plnkr.co/edit/Xe6ErQrg7WL6aAIoM9Gd?p=preview 에서 예제를 참조하십시오.

vinayk406 에 2014년 06월 26일

조만간 수정 되나요? sooooo 혼란 스럽습니다.

Yankovsky 에 2016년 02월 09일

추가 고려 후, 이것이 예상되는 동작이라고 말해야합니다. plnkr 예제에서 ngModel의 값은 컨트롤러와 지시문 범위 사이에 두 개의 바인딩 된 문자열입니다. 이제 지시문의 값을 변경할 때 ngModel은 먼저 _isolate_ 범위를 업데이트하고 동일한 다이제스트에서 ngChange를 실행합니다. 양방향 바인딩이 아직 지시어 범위에 대한 변경 사항을 선택하지 않았으므로 부모 범위의 ngChange는 x 의 "이전"값을 가져옵니다. 이제 양방향 바인딩 감시자는 값을 안정화하기 위해 최소 2 개의 다이제스트주기가 필요하므로 컨트롤러 범위는 ngChange가 호출 된 후에 만 업데이트됩니다.
나는 이것이 혼란 스럽다는 데 동의하지만 그것이 작동하는 방식입니다. ngModel에 바인딩하는 값을 보유하는 지시문에 개체를 바인딩하여이 문제를 해결할 수 있습니다. 이렇게하면 값이 격리 및 컨트롤러 범위에서 동시에 참조로 설정되고 ngChange가 실행될 때 사용할 수 있습니다. http://plnkr.co/edit/fs7S6yX1a5aeo1Ese522?p=preview

Narretz 에 2016년 02월 20일

😕6

Suamere 에 2016년 10월 31일

👍20

약간 관련이 있고 마찬가지로 혼란 스럽습니다. 사용하는 경우 ngChange 주는 또 다른 필드에 트리거 검증에 ngModel , 변경이되기 전에 트리거 $modelValue 업데이트됩니다. 검증을 복잡하게 만듭니다.

$timeout 를 해결 방법으로 사용합니다. 왜 그것이 필요한지 여전히 혼란스러워합니다.

예:
http://codepen.io/jakobadam/pen/qmBdrJ?editors=1010

안부, Jakob

jakobadam 에 2017년 04월 18일

👍2

이 문제를 다시 검토 할 계획이 있습니까? 재 개설?

나는이 문제를 만났고 주석을 읽었지만 격리 범위로 인해 현재 작동하는 방식이 합리적입니다. 변경시 호출이 실행될 때 업데이트 된 모델을 기대하고 모델 1 회 반복을 이전에 가져 오는 결과는 개발자로서 기대하는 동작이 아닙니다.

bombsite 에 2017년 04월 24일

나는 질문을 고수한다. 이것은 재검토 될 것인가?

nahueld 에 2017년 05월 06일

나는 그렇게 생각하지 않는다. 현재 동작이 예상되며 어떤 경우에는 바람직하지 않지만 적어도 그에 따른 많은 경우가 있습니다. 지금 변경하면 (a) 주요 변경 사항이되고 (b) 많은 사용 사례가 지원되지 않게됩니다 (예 : ngChange 값을 수정하기 위해 _before_ 부모를 업데이트하려는 경우). 모두를 행복하게 할 수없는 경우 중 하나이므로 다음과 같은 버전을 고수해야합니다.

말이된다.
기존 사용자를 해치지 않습니다.
약간의 추가 코드 비용이 들더라도보다 구체적인 / 고급 사용 사례를 지원합니다 (아래 참조).

현재 구현 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()" />

gkalpak 에 2017년 05월 06일

👍4

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Angular.js: 격리 범위에 대한 모델 업데이트 전에 Onchange가 트리거됩니다.

가장 유용한 댓글

모든 11 댓글

#

관련 문제