2013-07-02 2 views
2

고유 한 각도 지시문을 만들고 양식 유효성 검사를 사용하고 싶습니다. 그러면 다른 부분에서이 부분을 다시 사용할 수 있습니다. 실제 코드는 다르지만 나는 여기서 잘못된 방향으로 생각하고 있다고 느낍니다. 먼저 양식을 만들었습니다.Angular.JS 지시문의 유효성 검사가 양식의 일부인

<form name="check1"> 
    <input name="first" ng-model="first" type="text" required> 
    <input name="second" ng-model="second" type="text" required> 
    <input name="third" ng-model="third" type="text" required> 
</form> 
<span ng-show="check1.$invalid">Form is invalid</span> 

유효성 검사가 정상적으로 작동합니다.

<form name="check2"> 
    <input name="first" ng-model="first" type="text" required> 
    <mydirective second="second" third="third" required></mydirective> 
</form> 
<span ng-show="check2.$invalid">Form is invalid</span> 

및 JS : 그럼 난 내 양식가 유사 할

app.directive('mydirective', function() { 
return { 
    restrict: 'E', 
    transclude: true, 
    template: 
     '<span>'+ 
     '<input name="second" ng-model="second" type="text" >'+ 
     '<input name="third" ng-model="third" type="text" >'+ 
     '</span>' 
     , 
    replace: true, 
    scope: { 
     second: '=', 
     third: '=' 
    } 
     } 
}); 

무엇 검증 작업을하려면 어떻게? 이제 "first"를 채우면 check2 형식이 유효하게됩니다.

나는 컨트롤러에 링크 기능을 추가하려고했습니다 :

link: function(scope, element, attrs, controller) { 
     controller.$parsers.unshift(function(viewValue) 
     console.log(viewValue); 
     return viewValue; 
     }); 
    } 

그러나 나는 가지고 :

TypeError: Cannot call method 'unshift' of undefined 

모든 아이디어를 내가 잘못 뭐하는 거지?

편집

내 질문에 충분히 잘 작성하지 않은 것으로 보인다. 나는 Angular 지시문에서 조건부로 "필수"필드의 가능성을 찾고있었습니다. 그래서 만들기 :

<mydirective second="second" third="third" required></mydirective> 

지시어 필드가 필요한 것,이 없지만 :

<mydirective second="second" third="third"></mydirective> 

이 솔루션은 링크 기능 및 NG-요구에 바인드합니다을 사용하는 것입니다. 그래서 :

app.directive('mydirective', function() { 
return { 
    template: 
     '<span>'+ 
     '<input name="second" ng-model="second" type="text" ng-required="is_required">'+ 
     '<input name="third" ng-model="third" type="text" ng-required="is_required">'+ 
     '</span>' 
     , 
     link: function(scope, iElement, iAttrs) { 
      scope.is_required = angular.isDefined(iAttrs.required) 
      } 
     } 
}); 
+0

양방향 바인딩을 설정하는 이유는 무엇입니까? –

+0

@Ajaybeniwal : 'check2'의 범위에서 'second'와 'third'를 초기화하고 싶습니다. 사용자는 지시어 범위에서 값을 변경하고 'check2'의 범위에서 다시 한 번 사용됩니다 (서버에 저장 -이 스 니펫에 표시되지 않음). –

답변

0

은 그냥 지시 템플릿 코드 에 속성으로 "필요한"추가 모든 것을 (당신이 각 입력에 "필수"가 니펫을하기 때문에 첫 번째 코드에서, 그렇게 잊어 보인다) 괜찮을거야.

+0

의견을 보내 주셔서 감사합니다. 내 잘 작성된 질문에 대한 해결책은 편집 섹션에 있습니다. –

관련 문제