사용자 지정 입력 지시문과 함께 AngularJS 기본 제공 지시문을 사용하는 방법

Question

Selectize jQuery 플러그인을 사용하라는 지시문을 작성하려고합니다. 나는 대부분 기능적이지만 required 및 maxlength에 대한 유효성 검사를 처리해야합니다. ng-required 및 ng-maxlength 지시문을 사용하려고하지만 작동하지 못합니다. 또한 HTML maxlength 속성을 사용할 수 없습니다. 내 지시문에 내장 된 Angular 지시어를 사용할 수 있어야합니까, 아니면 유효성을 직접 확인하고 설정해야합니까?

.directive('selectize', function() { 
    return { 
     restrict: "A", 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      var options = scope.$eval(attrs.options); 
      var formattedOptions = []; 
      for (var i = 0; i < options.length; i++) { 
       var option = options[i]; 
       formattedOptions.push({ 'value': option, 'label': option }); 
      } 

      element.selectize({ 
       options: formattedOptions, 
       labelField: 'label', 
       valueField: 'value', 
       sortField: 'value', 
       searchField: 'value', 
       maxItems: 1, 
       hideSelected: true, 
       persist: false, 
       render: { 
        option_create: function (data, escape) { 
         return '<div class="create">' + data.input + '</div>'; 
        } 
       } 
      }); 

      element.on('change', function() { 
       scope.$apply(function() { 
        ngModel.$setViewValue(element.val()); 
       }); 
      }); 
     } 
    }; 
}) 

및 HTML : :이 요소를 검사 할 때

<input selectize 
     options="field.options" 
     ng-model="field.response" 
     class="form-control" 
     ng-required="field.required"> 
</input> 

은 필요가 field.required의 값이 true 인 경우에도 false로 설정되어

여기 내 지시 코드입니다. 마찬가지로 ng-maxlength를 사용하려고 시도했을 때 유효성 검사 오류 (ng-maxlength 및 유효성 검사 오류 HTML이 표시되지 않음)가 표시되지 않았습니다. HTML maxlength 속성을 사용하여 입력하려고 시도한 문자 수를 제한하지 않았습니다.

내가 잘못하고있는 아이디어가 있습니까? 나는 지침에 익숙하지 않기 때문에 필자가 놓친 다른 모범 사례가 있다면 그 점을 지적 할 수있다. 감사!

Answer 1

NgModelController에있는 각도 문서를 읽은 다음 사용자 지정 컨트롤 예제를 따르면 나는 내 지시문에서 ngModel을 올바르게 사용하지 않는다는 것을 발견했습니다. 다음과 같이 변경 한 후 사용자 지정 명령과 함께 ng-required를 사용할 수있었습니다. - 다이제스트가 이미 것에 대해 오류를 해결하려면

var selectize = element[0].selectize; 
ngModel.$render = function() { 
    selectize.setValue(ngModel.$viewValue); 
} 

3 :

1 - - 나는 require: ?ngModel

2 require: ngModel을 변경 내가 ngModel에 저장된 값을 유지하지 selectize 입력을 처리하기 위해 다음과 같은 추가 진행 중에 $ timeout을 사용하여 변경 사항을 수정했습니다.

element.on('change', function() { 
    $timeout(function() { 
     ngModel.$setViewValue(element.val()); 
    }); 
});