모델 데이터가 Anglejs의 양식 외부에서 변경될 때 감시자 내에서 양식 유효성을 어떻게 올바르게 확인합니까?

Question

저는 아직 AngularJS를 처음 접했고 $scope의 타이밍을 이해하는 데 어려움을 겪고 있는 것 같습니다.컨트롤러에서 다양한 양식 요소에 바인딩된 일부 모델 데이터에 대한 감시자를 설정했습니다.감시자는 양식이 유효하지 않은 경우를 제외하고 데이터가 변경되면 Ajax 요청을 시작합니다.myForm.$valid를 사용하여 양식 유효성을 확인하고 있습니다.그러나 모델 데이터가 양식이 아닌 컨트롤러에서 업데이트되는 경우를 제외하면 이는 모두 매우 간단합니다.유효성 검사는 예상대로 실행되지만 form.$valid에는 업데이트된 데이터의 값이 아닌 여전히 이전 값이 있습니다.예를 들어 양식이 이전에 유효했다면 필수 입력에 바인딩된 모델 값을 삭제하고 모델 데이터가 변경되었기 때문에 감시자가 실행되지만 myForm.$valid 값을 기록하면 그 값은 여전히 ​​true입니다. 그것이 거짓임에도 불구하고.

그래서 내 질문은 A입니다.왜 이런 일이 일어나는 걸까요? 하지만 더 중요한 것은 B입니다.내가 달성하려는 작업을 처리하는 올바른 방법은 무엇입니까?맞춤 지시어가 의미가 있을까요?

다음은 간단한 예입니다.

HTML:

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input type="text" name="myField" ng-model="myData" required>
        <button type="button" ng-click="myData=''">Delete</button>
    </form>

    <div>
        The watcher says the form is: <strong>{{ formStatus }}</strong>    
    </div>
</div>

제어 장치:

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myData = 'abc';
    $scope.formStatus = '';

    $scope.$watch('myData', function(newVal, oldVal) {
        if (newVal != oldVal) {
            console.log("my data changed");
            console.log("my form valid = ", $scope.myForm.$valid);        
            $scope.formStatus = $scope.myForm.$valid ? 'Valid' : 'Invalid';
        }
    });
}]);

깡깡이: http://jsfiddle.net/anpsince83/cK6cc/1/

Answer 1

사용자 정의 지시어가 올바른 방법입니다.일반적으로 시계를 컨트롤러와 지시문에 넣는 것이 권장되는 몇 가지 이유가 있습니다.높은 수준에서 한 가지 이유는 Angular가 컨트롤러가 얇고 뷰와 서비스 사이의 접착제로만 작동하도록 권장하기 때문입니다.하지만 구체적이고 흥미로운 이유가 있습니다.

컨트롤러는 Angular 지시어가 연결되기 전에 실행됩니다.따라서 컨트롤러 시계가 Angular 시계보다 먼저 시계 목록에 추가됩니다. ngModelWatch() ~을 위해 한다 myData. ngModelWatch() Angular가 실행되는 곳입니다. $formatters (그걸 기억해 $formatters, 무엇보다도 모델에 변경이 발생할 때 유효성 검사가 트리거되는 곳입니다.

Watch는 Watch List에 추가된 순서대로 실행되므로 제어 장치 $watch 유효성 검사 전에 실행됩니다. 에 의해 수행되고 $formatters.

대신에 같은 것을 넣으면 $watch 지시문 내에서 링크 중에 추가됩니다. ngModelWatch() 관심 목록에 추가되었습니다.따라서 지시어의 $watch 검증 후 실행됩니다 수행.

여기 업데이트된 바이올린 실행 순서를 볼 수 있는 곳 $formatters 그리고 각각 $watch.그러면 지시문 버전이 예상대로 작동하는 것을 볼 수 있습니다. $formatters.