'select'요소로 지시문 내부에 사용자 정의 옵션을 옮깁니다.

Question

ajax를 통해로드 된 (나중에 캐시 된) 옵션 집합으로 이루어진 선택에 대한 다소 일반적인 지시문이 있습니다.

이 지시문이 사용되는 위치에 따라 몇 가지 특정 옵션을 지정해야한다는 점이 중요합니다. 지시어의 존재와

<select-directive ng-model="model"> 
    <option value="x">custom option</option> 
</select-directive> 

을 :

{ 
      restrict: 'E', 
      scope:{ 
       ngModel: '=' 
      }, 
      transclude:true, 
      template:[ 
       '<select class="tipos" ng-model="ngModel">', 
        '<ng-transclude></ng-transclude>', 
        '<option ng-selected="ngModel === item.tipo" ng-repeat="item in ::tiposDoc track by item.tipo" value="{{::item.tipo}}" title="longer description">', 
         'description', 
        '</option>', 
       '</select>' 
      ].join(''), 
      link: function(scope){ 
       $http.get('viewApp/viewCtrl.php/getTipos',{cache:true}) 
        .then(function(response){ 
         var resp = response.data; 
         if(!resp.success){ 
          console.log(resp.log); 
          alert(res.msg); 
          return false; 
         } 
         scope.tiposDoc = resp.result; 
        }); 
      } 
     } 

을하지만 사용자 지정 옵션은 선택 요소에 표시되지 않습니다 나는이 같은 같은 옵션을 transclude 수있다 생각했다. 내가 놓친 게 있니? 어떤면에서나 다른면에서 이것이 가능한가? 각도의 select 지시와 어떤 식 으로든 분명히 ng-include 태그 충돌

link: function(scope, element, attrs, ctrls, transclude){ 
    var html = transclude(); 
    element.find('select').append(html); 
} 

Answer 1

를, 그래서 내가 사용 결국 해결 방법은 다행히도을 ng-transclude 속성과 optgroup을 포함했다 :

Answer 2

당신은 이런 식으로 작업을 수행 할 수 있습니다 근무 :

Maximus 응답도 제대로 작동했지만 사용자 지정 옵션과 함께 일부 기능을 작동시키지 못했습니다.