Bootstrap-select,angularjs下拉列表无法正常工作

我有这个问题,希望得到一些如何解决它的建议.

我已将部分html页面移动到局部视图中并通过ng-view加载它
现在的问题是下拉选择不再起作用了,我设法恢复了样式但是当我点击它时,它没有打开.
当它不在局部视图中时,我甚至不需要进行现在似乎需要的javascript调用.

这是我的代码

index.html
 <link href="resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/css/bootstrap-select.css" rel="stylesheet">
    <!-- Bootstrap Core CSS -->

    <script src="resources/js/jquery-2.1.1.min.js"></script>
    <script src="resources/js/jquery-1.11.0.js"></script>

    <script src="resources/js/bootstrap-select.js"></script>

    <script src="resources/library/angular.js"></script>
    <script src="resources/library/angular-route.js"></script>
    <script src="resources/js/MainController.js"></script>
    <script src="resources/js/main-app.js"></script>

    partialview.html
    -------------------
     <select class="selectpicker" multiple ng-model="selE">
                    <option ng-repeat="e in ee">{{e}}</option>
                </select>

    <script>
    $(document).ready(function () {

        $('select').selectpicker({
            style: 'btn-default',size: false
        });

    });

</script>

先感谢您.

解决方法

混合Angular jQuery不是一个好习惯.如果要使用任何jQuery插件,可以将其包装到自定义角度指令( official docs)中.

请参阅此jsFiddle中的selectpicker指令的工作示例.

HTML：

<select class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

js：

angular.module('demo')
  .directive('selectpicker',function () {
    return {
      restrict: 'C',link: function (scope,element) {
        $(element).selectpicker({
          style: 'btn-default',size: false
        });
      }
    };
  });

链接到控制器

使用require：指令中的’ngModel’将为您提供ngModelController作为链接函数的第4个参数(see doc here).

因此,您可以轻松地将控制器值与指令范围绑定.

见这里other jsFiddle.

指令：

angular.module('demo')
  .directive('selectpicker',require: 'ngModel',element,attrs,ngModel) {
        var $el = $(element);
        $el.selectpicker({
          style: 'btn-default',size: false
        });
        $el.on('change',function (ee,aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

控制器：

angular.module('demo')
  .controller('MainCtrl',function ($scope) {
    $scope.selected = [];
  });

HTML：

You have selected : {{ selected | json }}

<select ng-model="selected"
        class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

传递参数中的选项

见3rd jsFiddle.

要动态传递选项,只需更新您的指令：

angular.module('demo')
  .directive('selectpicker',function ($timeout) {
    return {
      restrict: 'C',replace: true,template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',scope: {
        options: '='
      },ngModel) {
        var $el = $(element);
        $timeout(function () {
          $el.selectpicker({
            style: 'btn-default',size: false
          });
        });
        $el.on('change',aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

然后在你的HTML中：

<div ng-model="selected"
        class="selectpicker"
        options="issues"
        title='Choose one of the following...'>
</div>