다른 지시어 안에 지시문을 바인딩하는 각도 방법은 무엇입니까?

Question

입력에 클라이언트 및 서버 측 유효성 검증을 설정하는 데 사용되는 지정 문을 작성 중입니다. 유효성 검사기 이름 배열 (예 : aa-validate="required,unique")을 허용하고 루프를 반복하며 모든 유효성 검사기 (예 : required에 ngRequired이 추가되어야 함)에 대한 클라이언트 측 유효성 검사 지침을 추가하고 나머지는 서버 측 유효성 검사 API에 게시해야합니다.

마지막 부분은 잘 작동합니다. 나는 ngModel 속성을보고 100ms 타임 아웃으로 서버에 게시하고 있습니다. 그러나 내 지시문의 연결 기능 내에서 클라이언트 측 유효성 검사 지시문을 설정해도 컴파일 및 링크되지 않습니다. 즉, 그들은 아무것도하지 않습니다.

angular.module('form', []) 
    .directive('aaValidate', ['$http', function($http) { 
     return { 
      priority: 1, 
      restrict: 'A', 
      require: 'ngModel', 
      link: function(scope, element, attrs, ctrl) { 
       var validate = attrs.aaValidate, 
        validators = validate.split(','); 

       // This is the problem! 
       // 
       // Populate possible client-side validators 
       for (var i = 0, len = validators.length; i < len; i++) { 
        var validator = validators[i]; 
        switch (validator) { 
         case 'required': 
          attrs.$set('ngRequired', 'true'); break; 
         // ... and so on for ngPattern, etc. 
         default: break; 
        } 
       } 

       scope.$watch(attrs.ngModel, function(value) { 
        // This part works! 
        // 
        // Clear existing timeout, reset it with an 
        // $http.post to my validation API, the result is 
        // passed into ctrl.$setValidity 
       }); 
      } 
     } 
    }]); 

내가 $compile를 주입하고, 연결 기능의 마지막 요소를 다시 컴파일하는 시도를했다 : 여기 내 코드입니다. 나는 어떤 속성을 제거하지 못했기 때문에 아마도 무한 재귀로 끝났지 만, 비록 내가 이런 방식으로 처리하더라도, 그것은 오히려 추한 느낌을 갖습니다. 올바른 접근 방식은 무엇입니까?

도움을 주시면 대단히 감사하겠습니다. 미리 감사드립니다.

---

편집 : jsFiddle : http://jsfiddle.net/3nUdj/4/

Answer 1

내 첫 번째 대답은 잘못 - 나는 $compile 서비스를 사용하여 주위에 어떤 방법이 생각하지 않습니다. 무한 재귀가 발생하지 않고이를 수행하는 방법은 다음과 같습니다. 필자는 기본적으로 지시문을 두 개의 지시문으로 분할했습니다. 하나는 유효성 검사 지시문을 추가하고 자체를 제거하고 다시 컴파일합니다. 다른 하나는 다른 것들을 수행합니다 :

ng-repeat에서 작동하려면 링크 된 요소를 다시 컴파일해야합니다. 나는 바이올린을 업데이트했습니다 : http://jsfiddle.net/3nUdj/7/