使用AngularJS MVC局部视图进行引导选择时，搜索未按预期工作

Bootstrap select with data live search在正常视图中工作正常，但在主视图中呈现的部分视图中工作不正常（

Index.cshtml

）

我有一个索引页面，其中所有jQuery文件都包含在页面底部，部分视图根据菜单选择呈现。我正在使用嵌套ui路由器

    <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>

---

我们需要为此创建一个指令，如下所示，然后使用属性选择选择器在html表单中调用它

.directive（'selectPicker'，['$parse'，function（$parse）{
返回{
限制：“A”，
要求：[“？ngModel”、“？ngCollection”]，
优先事项：10，
编译：函数（远程通讯、tAttrs、转置）{
selectpicker（$parse（tAttrs.selectpicker）（）；
tElement.selectpicker（'refresh'）；
返回函数（范围、元素、属性、模型）{
如果（！ngModel）返回；
范围$watch（attrs.ngModel，函数（newVal，oldVal）{
作用域$evalAsync（函数（）{
如果（！attrs.ngOptions | |/track by/.test（attrs.ngOptions））
元素.val（newVal）；
element.selectpicker（'refresh'）；
});
});
ngModel.$render=function（）{
元素。选择器（“val”，ngModel.$viewValue | |“”）；
};
ngModel.$viewValue=element.val（）；
};
}
};
}])

银行简称

我们需要为此创建一个指令，如下所示，然后使用属性选择选择器在html表单中调用它

.directive（'selectPicker'，['$parse'，function（$parse）{
返回{
限制：“A”，
要求：[“？ngModel”、“？ngCollection”]，
优先事项：10，
编译：函数（远程通讯、tAttrs、转置）{
selectpicker（$parse（tAttrs.selectpicker）（）；
tElement.selectpicker（'refresh'）；
返回函数（范围、元素、属性、模型）{
如果（！ngModel）返回；
范围$watch（attrs.ngModel，函数（newVal，oldVal）{
作用域$evalAsync（函数（）{
如果（！attrs.ngOptions | |/track by/.test（attrs.ngOptions））
元素.val（newVal）；
element.selectpicker（'refresh'）；
});
});
ngModel.$render=function（）{
元素。选择器（“val”，ngModel.$viewValue | |“”）；
};
ngModel.$viewValue=element.val（）；
};
}
};
}])

银行简称

它正在工作。。。但是有一些问题。页面加载空白选项显示在选择中，但当单击任何空白选项时，它会显示包含正确数据的所有选项。请确保在加载表单或屏幕时，设置或触发选择选项的相应视图模型。在上面的示例中，选择选项的视图模型是selectedMasterBank。我在控制器中设置如下值：$scope.masterbanks=response.data$scope.selectedMasterBank=$scope.masterbanks[0]；其主要思想是确保使用值启动或触发selectedMasterBank。因为它将被范围捕获。$watch是指令的一部分。它正在工作。。。但是有一些问题。页面加载空白选项显示在选择中，但当单击任何空白选项时，它会显示包含正确数据的所有选项。请确保在加载表单或屏幕时，设置或触发选择选项的相应视图模型。在上面的示例中，选择选项的视图模型是selectedMasterBank。我在控制器中设置如下值：$scope.masterbanks=response.data$scope.selectedMasterBank=$scope.masterbanks[0]；其主要思想是确保使用值启动或触发selectedMasterBank。因为它将被范围捕获。$watch是指令的一部分。

    <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>