Question

我试图在模式中的select元素上应用select2。

模态定义为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
         });
    });

 };

然后在我的模板中：

在选择领域（见下文）我确实喜欢这样：data-ng-init="select()"

实际上有效，它将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

我建议你创建一个包含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>

这将在渲染选择控件时初始化select2。

AngularJS在模态中的元素上应用select2

1 个答案: