Bootstrap Select 搜索未按预期使用 AngularJS MVC 部分视图

Question

Bootstrap select data-live-search 在普通视图中工作正常，但在主视图中呈现的部分视图中无法按预期工作 (Index.cshtml)

Bootstrap select with Normal View        Bootstrap select with Partial View

我有一个索引页面，其中所有 jQuery 文件都包含在页面底部，部分视图是根据菜单 selection 呈现的。我正在使用嵌套的 ui-router。

    <div class="page-container">
      <div class="page-content">
        <ui-view></ui-view>
      </div>
    </div>

<script type="text/javascript" src="~/Scripts/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap.min.js"></script>

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-loader.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-ui-router.js"></script>
<script src="~/Scripts/angular-material.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/angular-kendo.js"></script>
<script src="~/Scripts/angular-datepicker.min.js"></script>
<script src="~/Scripts/angular-cookies.js"></script>

<script type='text/javascript' src='~/Scripts/plugins/icheck/icheck.min.js'></script>
<script src="~/Scripts/angular-datatables.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/scrolltotop/scrolltopcontrol.js"></script>

<script type="text/javascript" src="~/Scripts/plugins/morris/raphael-min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/morris/morris.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/rickshaw/d3.v3.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/rickshaw/rickshaw.min.js"></script>
<script type='text/javascript' src='~/Scripts/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js'></script>
<script type='text/javascript' src='~/Scripts/plugins/jvectormap/jquery-jvectormap-world-mill-en.js'></script>
<script type='text/javascript' src='~/Scripts/plugins/bootstrap/bootstrap-datepicker.js'></script>
<script type="text/javascript" src="~/Scripts/plugins/owl/owl.carousel.min.js"></script>

<script type="text/javascript" src="~/Scripts/plugins/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-timepicker.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-file-input.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-select.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/tagsinput/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="~/Scripts/plugins.js"></script>
<script type="text/javascript" src="~/Scripts/actions.js"></script>
<script type="text/javascript" src="~/Scripts/demo_dashboard.js"></script>

Answer 1

我们需要为此创建一个指令，如下所示，然后使用属性 select-picker

在我们的 html 表单中调用它

  .directive('selectPicker', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            require: ["?ngModel", "?ngCollection"],
            priority: 10,
            compile: function (tElement, tAttrs, transclude) {
                tElement.selectpicker($parse(tAttrs.selectpicker)());
                tElement.selectpicker('refresh');
                return function (scope, element, attrs, ngModel) {
                    if (!ngModel) return;

                    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                        scope.$evalAsync(function () {
                            if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) 
                                element.val(newVal);
                                element.selectpicker('refresh');
                        });
                    });

                    ngModel.$render = function() {
                        element.selectpicker("val", ngModel.$viewValue || "");
                    };

                    ngModel.$viewValue = element.val();
                };
            }
            
        };
    }])

<div class="form-group">
<label class="col-md-2 col-xs-12 control-label">Bank Short Name</label>
<div class="col-md-6 col-xs-12">
    <select class="form-control with-search" select-picker data-live-search="true" title="Select Bank" 
 ng-model="selectedMasterBank"
 ng-options="b as b.shortName for b in masterbanks"
 ng-change="onChangeSelectedMasterBank(selectedMasterBank)">
    </select>
</div>
</div>

Bootstrap Select 搜索未按预期使用 AngularJS MVC 部分视图

Bootstrap Select with search not working as expected with AngularJS MVC partial view

asp.net-mvc

select

partial-views

twitter-bootstrap

angularjs