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>

所以问题是，我想在模态元素上应用select2。我怎么能这么做？如何通过id访问模态元素并在其上应用select2？

编辑：

我做了一些改变：

在控制器上，我做了一个函数：

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

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

 };

然后在我的模板中：

在select字段(见下面)，我做了如下操作：data-ng-init="select()"

实际上，它将select2应用于我的元素。

这是一个正确的方法吗？这个案子我能用一下吗？

<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

我建议您创建一个包装select2插件的指令：

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>

这将在呈现select控件时初始化select2。