AngularJS применяет select2 к элементу в модальном

Question

Я пытаюсь применить select2 к элементу select в пределах модального.

Модаль определяется как script ng-template. Это отлично работает, если это не модальный (или шаблон).

<script type="text/javascript"> 
    $(document).ready(function ($) { 
     $("#typeDescription").select2({ 
      placeholder: 'Select a type...', 
      allowClear: true 
     }); 
    }); 
</script> 

Однако я не могу включить вышеупомянутый код в

<script type="text/ng-template" id="myModal"> 

</script> 

Так дело в том, я хочу, чтобы применить ВЫБ.2 на моем элементе на модально. Как я могу это сделать? Как я могу получить доступ к модальному элементу по id и применить select2 на нем?

EDIT:

Я сделал некоторые изменения:

На контроллере я сделал функцию:

...... 
$scope.select = function() { 

    $(document).ready(function ($) { 
     $("#typeDescription").select2({ 
       placeholder: 'Select a type...', 
       allowClear: true 
     }); 
    }); 

}; 

, а затем в моем шаблоне:

в избранных подан (см ниже) Мне понравилось: data-ng-init="select()"

и ac работает, он применяет select2 к моему элементу.

Это правильный подход? Могу ли я использовать ng-init для этого случая?

<script type="text/ng-template" id="myModal"> 
    <div class="modal-header"> 
     <button type="button" class="close" ng-click="currentModal.close();" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Title</h4> 
    </div> 

    <div class="modal-body"> 

     <div class="form-horizontal"> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="field-1">Name</label> 

       <div class="col-sm-10"> 
        <input type="text" class="form-control" data-ng-model="newType.Name" id="field-1" placeholder="Name"> 
       </div> 
      </div> 


      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="field-5">Description</label> 

       <div class="col-sm-10"> 
        <textarea class="form-control" data-ng-model="newType.Description" cols="5" id="field-5" placeholder="Description"></textarea> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label" for="field-5">Select Type</label> 

       <div class="col-sm-10"> 
        <select class="form-control" id="typeDescription" data-ng-model="newType.Type" data-ng-init="select()"> 
         <option data-ng-repeat="item in allTypes.Types" value="{{item.Value}}">{{item.Text}}</option> 
        </select> 

       </div> 
      </div> 
     </div> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-gray btn-single" data-ng-click="currentModal.close();">Cancel</button> 
     <button type="button" class="btn btn-info btn-single" data-ng-click="createType(); currentModal.dismiss();">Save</button> 

    </div> 
</script> 

Answer 1

Я бы рекомендовал создать директиву Обертывание ВЫБ.2 плагин:

var lib = angular.module('lib'); 
lib.directive('mySelect', [function() { 
    var link = function (scope, element, attrs) { 
    element.select2({ 
     placeholder: attrs.placeholder, 
     allowClear: attrs.allowClear 
    }); 
    } 

    return { 
    restrict: 'A', 
    link: link 
    }; 
}]); 

использовать его как это:

<select data-my-select placeholder="'Select a type...'" allowClear="true"></select> 

Это будет инициализировать ВЫБ.2, когда выбор управления визуализируется ,