ブートストラップは、anglejsで期待通りに動作しませんmvc partial view

Question

通常のビューでは正常に動作しますが、メインビュー（Index.cshtml）内でレンダリングされる部分的なビューでは期待どおりに動作しないブートストラップselect

click to see : Bootsrap select with Normal View

click to see : Bootsrap select with Partial View

すべてのjqueryのファイルがページの下部に含まれており、部分的なビューは、メニューの選択に基づいてレンダリングされ、私はインデックスページを持っています。私はネストされたui-routerを使用しています。私たちは、このためのディレクティブを作成するには、以下のようなものや、属性を使用することにより、当社のhtmlフォームでそれを呼び出す必要が

<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

選択-ピッカーを

.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" 
 
\t ng-model="selectedMasterBank" 
 
\t ng-options="b as b.shortName for b in masterbanks" 
 
\t ng-change="onChangeSelectedMasterBank(selectedMasterBank)"> 
 
    </select> 
 
</div> 
 
</div>