加载 ng-options 后初始化 jQuery

Question

我有一个带有多选功能的 cshtml 文件。现在我必须将该多选从使用 .NET 填充到使用 AngularJS 填充。 我已经创建了如下所示的选择，但是当页面加载时，向我使用 Angular 填充的多选添加了一个 display: none 属性，并且旧的 jQuery 多选出现，其中没有数据。

我的猜测是，当初始化 jQuery 多选时，没有数据存在。因此，当 Angular 想要填充多选时，它会创建一个具有所需值的新选项，但我不确定它为什么不显示。

<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <div ng-controller="CreateConfigCtrl" class="body">
                    <div class="form-group">
                        <label class="control-label col-lg-4">Configuration name</label>
                        <div class="col-lg-8">
                            <input type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4"></label>
                        <div class="col-lg-8">
                            <select multiple class="multipleSelect" ng-multiple="true" ng-model="object" ng-options="obj.Name for obj in model.XMLColumns" options-load="model.XMLColumns" size="16" name="test"></select>
                        </div>
                    </div>
                    <hr />
                    <div class="form-group" id="concatFieldsTextBoxes"></div>
                    <div id="Buttons" style="clear: left">
                        <input type="submit" class="btn btn-primary" value="Save config" />
                    </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        function initSectionList() {
            $(".multipleSelect").each(function (element) {
                var b = $(this);
                if (!b.data('init-multi')) {
                    b.multiselect2side({ 'search': 'Search: ' });
                    b.data('init-multi', true);
                }
            });
        }

        initSectionList();
    });
</script>

上面是我的 CSHTML 页面，下面是我的 CreateConfigCtrl.js

var app = angular.module('PdfConfig.CreateController', [])

app.controller('CreateConfigCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.model = {};

    $http.get('CreateVM').success(function (data) {
        $scope.model = data;
    });
}]);

我已经阅读了有关使用 $timeout 或 $watch 添加指令的信息，但我不明白如何在加载所有 ng-options 后初始化该 jQuery 函数。

Answer 1

您可以在服务响应后使用 ng-if 创建 ng-options，然后使用 $timeout 调用您的 jquery 函数：- HTML:-

<div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div ng-controller="CreateConfigCtrl" class="body">
                        <div class="form-group">
                            <label class="control-label col-lg-4">Configuration name</label>
                            <div class="col-lg-8">
                                <input type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-4"></label>
                            <div class="col-lg-8" ng-if="flag">
                                <select multiple class="multipleSelect" ng-multiple="true" ng-model="object" ng-options="obj.Name for obj in model.XMLColumns" options-load="model.XMLColumns" size="16" name="test"></select>
                            </div>
                        </div>
                        <hr />
                        <div class="form-group" id="concatFieldsTextBoxes"></div>
                        <div id="Buttons" style="clear: left">
                            <input type="submit" class="btn btn-primary" value="Save config" />
                        </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

            function initSectionList() {
                $(".multipleSelect").each(function (element) {
                    var b = $(this);
                    if (!b.data('init-multi')) {
                        b.multiselect2side({ 'search': 'Search: ' });
                        b.data('init-multi', true);
                    }
                });
            }



    </script>

Angular js 代码：

var app = angular.module('PdfConfig.CreateController', [])

app.controller('CreateConfigCtrl', ['$scope', '$http', function ($scope, $http,$timeout) {
    $scope.model = {};
    $scope.flag=false;
    $http.get('CreateVM').success(function (data) {
        $scope.model = data;
         $scope.flag=true;
        $timeout(function(){ 
        $(".multipleSelect").each(function (element) {
                var b = $(this);
                if (!b.data('init-multi')) {
                    b.multiselect2side({ 'search': 'Search: ' });
                    b.data('init-multi', true);
                }
            });
      });         
   });
}]);

Answer 2

您尝试做的方式是不好的做法。

您需要 create a directive 为您的 multiselect2side 使用它。