ngTagsInput 자동 완성으로 제안시 표시

Question

자동 완성의 스타일과 동작을 버튼과 유사하게 사용자 정의하고 싶습니다. 주요 문제는 자동 완성 기능이 현재 제안 된 제안 사항을 아래쪽 화살표, 초점 맞추기 및 비어있는 것으로 표시 할 수 있다는 것입니다.

이것을 구현하는 데 도움이되는 포인터는 무엇입니까? 이 작업을 수행 할 수있는 대체 모듈은 무엇입니까?

Answer 1

지시어 tagsInput는 그것의 템플릿으로 ngTagsInput/tags-input.html를로드

tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) { 
... 
return { 
    restrict: 'E', 
    require: 'ngModel', 
    scope: { 
     tags: '=ngModel', 
     onTagAdded: '&', 
     onInvalidTag: '&', 
     onTagRemoved: '&' 
    }, 
    replace: false, 
    transclude: true, 
    templateUrl: 'ngTagsInput/tags-input.html', 

으로 정의된다. 그런 다음 여기에 사용자 정의 액션 ng-click="eventHandlers.input.click($event)"를 추가하고 지시에 클릭 기능을 구현할 수 있습니다 그래서이 file

<input class="input" 
     ng-model="newTag.text" 
     ng-change="eventHandlers.input.change(newTag.text)" 
     ng-keydown="eventHandlers.input.keydown($event)" 
     ng-focus="eventHandlers.input.focus($event)" 
     ng-blur="eventHandlers.input.blur($event)" 
     ng-paste="eventHandlers.input.paste($event)" 
     ng-trim="false" 
     ng-class="{'invalid-tag': newTag.invalid}" 
     ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}" 
     ti-autosize> 

살펴 보자.

스타일을 맞춤 설정해야합니다.

Answer 2

Rebornix의 답을 바탕으로 필자는 suggestionList.load()를 호출 할 새로운 loadOnClick 매개 변수로 자동 완성 지시문을 포크하고 수정했습니다.

더 미세 조정이 필요할 수도 있지만 예상대로 작동합니다. 변경 내용은 다음과 같이 커밋됩니다. event handler - template 및 implementation.