Angularjs 사용자 지정 유효성 검사 지침

Question

안녕하세요 유효성 검사 지시문에 문제가 있습니다.

app.directive('ngAttr', function($compile){ 
return { 
    scope:{}, 
    link: function (scope, element, attrs){ 
     var opts = scope.$eval(attrs.ngAttr); 

     if(opts.condition){ 
      element.attr(opts.attrName, opts.condition) 
     } 
    } 
}; 

}) : 우선 나는 그것은 다음과 같습니다 ...이 calidation가 해고 여부를해야하는지 말해 일부 매개 변수를 기반으로 지침을 가지고있는 입력 요소를 생성 지침을 가지고 ;

이 추가 내가 조건부 지시문을 추가 할 경우에 전달 조건에 따라 ... 내가 할 속성 :

ng-attr="{condition: {{opts.validatePhone}}, attrName:'validate-phone'}" 

입력을 생성하는 속성 너와 나의 이전 지침으로 ... 그리고 문제는 한 번 지시가 생성 될 때 그것이 ..., 검증 지침의 코드가 입력 처리기에 반응 doen't 유효성 검사 전화 지시어가 발사된다는 점이다 :

app.directive('validatePhone', function($compile){ 
return{ 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel){ 

     function validate(val){ 
      console.log(val) 
     } 

     scope.$watch(function() { 
      return ngModel.$viewValue; 
     }, validate); 

    } 
}; 

});

간단하지만 console.log() 입력을 변경할 때 작동하지 않습니다. 누군가가 아이디어를 가지고 있다면이 $ 시계 기능이 올바르게 설정되어 생각하지 않는다 http://plnkr.co/edit/CgVCV58goFS9GKLBtRrw?p=preview

Answer 1

... 그것을 확인하는 것이 더 쉬울 수 있도록

은 내가 plunker를 만들었습니다.

유효성 검사 기능을 사용하여 이 원하는 것을 좀 더 구체적으로 지정할 수 있다면 도움이됩니다.

다음은 $ watch의 Angularjs 문서에 대한 링크입니다.

[$watch][1] 

시계 식은 범위의 속성에 유의하십시오. $ watch 함수에는 아무 것도 포함하지 않습니다. 당신은 '범위'를 말하고 있습니다 '감시'기능.

무슨 말을해야하는 것은

'범위'제발 '시계' '여기 범위 속성을 입력'하고 변경할 때이 기능을 실행이라는 속성 또는 다른 사용자 지정 논리이다.

나는 대부분 당신이 아무것도 보지 못한다고 생각합니다. 당신은 업데이트하기 위해 당신이 무엇이든간에 ng 모델을 볼 필요가 있습니다.

은 각 NG 모델의 가치를 모른다면 아마도 그들이 NG 반복을 사용하여 동적으로 생성되기 때문에,

scope.$watch(attrs.ngModel, function(elementValue) { 
    if(!elementValue){ return; } // return if falsy. 
    if(validate(elementValue)){ return elementValue; } 
    }); // or something like this. 

...이 귀하의 기능을 변경하고 서버에서 알 수없는 값

당신은 뭔가를보기 위해 이와 같은 것을 할 수 있습니다. 당신의 HTML에서 그런

app.directive('mydirective', function(){ 

    return { 
    restrict:'A', // Declares an Attributes Directive. 
    require: '?ngModel', // ? checks for parent scope if one exists. 

    link: function(scope, elem, attrs, ngModel){ 
     if(!ngModel){ return }; 

     scope.$watch(attrs.ngModel, function(value){ 
     if(!value) { return }; 
     // do something with validation of ngModel. 
     }); 
    } 
    } 
}); 

<input type="text" ng-model="{{ dynamicValue }}" my-directive /> 

또는

<input type="text" ng-model="{{ dynamicValue }}" my-directive="myFunctionName()" /> 

당신은 비록 기능을 실행하도록 지시에 약간을 추가해야합니다. 아마 그런 다음 지시어 $ 시계에 당신은 내가 생각하는이 같은

scope.myDirective(); 

뭔가처럼 실행할 수

scope: { 
    myDirective: '&' 
} 

같은 범위를 분리.

또한 Angularjs를 사용하여 유효성을 검사하는 방법은 다양합니다. 다음은 또 다른 링크입니다.

Here is one way

유효성 검사를 연결하는 방법은 여러 가지가 있습니다.

모델을 볼 수 있습니다. 일부 이벤트 (흐림, 클릭, 포커스 등)에서 실행되도록 함수를 추가 할 수 있습니다. 또는 유효성 검사 함수를 호출하여 지시문이로드 될 때 함수를 실행하십시오. 유효성 검사 (값);