AngularJS select2 - 지시문 작성 방법은 무엇입니까?

Question

(미안 내 영어 : 나는이 같은 AngularUI UI - 선택 2 지시어 내 형태로 Select2을 사용하고

:

<input ng-model="city" type="text" ui-select2="setupCitySelect" /> 

곳 setupCitySelect - 선택 2 옵션 객체입니다. 나는 적절한 범위에 그를 세울거야

$scope.setupCitySelect = { 
    allowClear: true, 
    minimumInputLength: 2 

    ...etc, about 50 SLOC 
} 

모두 잘 작동한다. 그러나 우리가 말했을 때, 페이지 (또는 페이지의 일부)에 5 개의 select2 요소 - CitySelect, UserSelect, ConditionSelect 등이 있습니다. 우리는 많은 코드를 가지며, 대부분이 동일합니다. AngularUI는 "글로벌 기본값"을 제공합니다. 그래서 우리는 (지시)에 코드를 반복 이동할 수 있습니다

var dirs = angular.module('vipc.directives', ['ui']); 

// defaults setting for UI 
dirs.value('ui.config', { 
    select2: { 
     allowClear: true, 
     minimumInputLength: 2, 
     formatInputTooShort: function(term, minLenght) { 
      var rest = minLenght - term.length; 
      return "minimum: "+rest; 
     }, 
...etc. 

을하지만 우리는 여전히 컨트롤러에 몇 가지 작업을해야합니다 ... 을 같은 아약스 - URL과 고유의 속성을 설정하고이 여러 페이지에왔다, 여러 컨트롤러 . Ough ... 예,이 파일을 common.js라는 하나의 파일에 넣을 수 있습니다. 하지만 제 생각에는 최선의 방법은 아닙니다. Angulas는 말한다 : "지시를 사용하십시오, Luke!". 그러나 어떻게? 너무 복잡한 문서들. 나는 docs을 읽었다. 세 번. 성공하지 못했습니다. 나는 간단한 dir을 썼지 만 ... '고립 된'범위가 있어야한다. 위의 검색 양식과 모달 형식에서 CitySelect를 2 페이지로 사용할 수있다. 함수를 컴파일 하시겠습니까? 링크 기능?

내가 필요로하는 것은 단지

<myapp-city-select id="city"></myapp-city-select> 
<myapp-user-select></myapp-city-select> 
...later, same html file 
<myapp-city-select id="city2"></myapp-city-select> 

누군가가 도움이 될 수있다?

Answer 1

컨트롤러에 있어야합니다. 다음은 plunker입니다. 모든 지시어가 동일한 데이터를 공유한다는 것을 보여줍니다.

컨트롤러에서 일반 옵션으로 지시문을 가져 와서 특정 옵션을 컨트롤러에 전달할 수 있습니다.

또 다른 옵션은 공통 옵션을 정의하고 원하는 곳으로 서비스를 삽입하는 서비스입니다.