AngularJS 지시문 유효 기간

Question

입력 필드가 유효하지 않은 것으로 표시된 경우 일부 동작을 수행해야하는 지시문을 만들려고합니다. 이 예를 들어 내가 입력이 소수 인 경우 확인하는 지시어가 있다고 가정 할 수 있습니다, 그리고 그것이 무효의 요소에 클래스를 추가하는 지시문을 만들려면 :

이

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"> 

유효성 검증 프라임은 사용을 파서 및 포맷터를 ng-model에 적용하여 모델의 유효성을 업데이트합니다.

이제 잘못된 추가 클래스 지시문을 사용하여 모델이 유효하지 않을 때 "오류"클래스를 추가하고 유효 할 때 제거하도록합니다. 즉, 모델 컨트롤러의 $ valid (또는 $ invalid) 속성을 확인해야합니다. 그러나, 나는이 일을하는 방법을 알아낼 수 없습니다. 나는 시도했다 :

link : function(scope, element, attrs, ctrl) { 
    ctrl.$watch("$valid", function(newVal, oldVal) { 
    //never fired 
    }); 
} 

아마도 범위의 일부 변수를 볼 수 있지만 어떤 변수를 볼지 모르겠다.

모델의 유효 기간이 변경되면 어떻게 알림을받을 수 있습니까? 당신이 <form>이있는 경우

Answer 1

, 그것은에 name이 당신의 입력에 name ('myForm을'을 가정 할 수 있습니다) 추가 (myInput를 가정 할 수 있습니다). 당신은에 의해 $watch이 할 수 있어야한다 : 당신이 form이없는 경우

scope.$watch('myForm.myInput.$valid', function(validity) {}) 

, 당신은 항상 함수를 볼 수 있습니다. 이 방법은 다음과 같습니다.

scope.$watch(function() { return ctrl.$valid; }, function(validity){}); 

양식 접근 방식에 대한 자세한 내용은 here을 참조하십시오.

Answer 2

우리의 목표는 일반적으로 하나의 양식이나 입력과 독립적으로 지시문을 작성하는 것입니다. 어떻게 로컬 $valid 속성을 하나의 특정 양식 & 입력 이름에 절대적으로 바인딩하지 않고 읽을 수 있습니까?

require: 'ngModel'을 지침 구성의 속성 중 하나로 사용하십시오. 이렇게하면 로컬 ngModel 컨트롤러가 링크 함수의 네 번째 인수로 삽입되고 $watch을 $valid에 직접 배치하여 지시문의 구현을 특정 양식이나 입력에 연결할 필요가 없습니다.

require: 'ngModel', 
link: function postLink(scope, element, attrs, controller) { 
    scope.inputCtrl = controller; 
    scope.$watch('inputCtrl.$valid', handlerFunc) 
} 

처리기는 해당 구조에 대해 $ valid의 변경 사항을 계속해서 발생시켜야합니다. this Fiddle을 참조하십시오. 입력은 미국 우편 번호 또는 우편 번호 + 4 패턴으로 확인됩니다. 유효성이 변경 될 때마다 알림을 받게됩니다.

EDIT 3/21/14 :이 게시물은 이전에 구현 문제의 잘못된 원인을 수정하여 내 망상에 매달려있었습니다. 내 잘못. 위의 예에서는 그 고정을 제거합니다. 또한, 시계 식 주위에 따옴표를 추가하면이 접근 방식이 실제로 작동한다는 것을 보여주는 바이올린을 추가했습니다.당신이 <form />이없는 경우

Answer 3

당신은 쉽게 하나를 얻을 수 있습니다 :

require: '^form' 

다음 링크 기능으로, 양식이 네 번째 매개 변수로 전달됩니다 : 당신의 지시 정의에서

을

을

0 : 이제

link: function (scope, element, attr, ctrl) { 

당신은 하드 코드 형태 또는 $ 시계를 수행 할 수있는 입력 필드가없는

scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
function (validity) {});