angularjs - 角JS。多选 JQuery 插件

Question

将这个引导选择插件（http://silviomoreto.github.io/bootstrap-select/）实现为角度的正确方法是什么。我已将其放入指令中：

App.directive('selectmultiple', [function(){
    return function(scope, element, attributes){
        element = $(element[0]);

        element.selectpicker({

        })
    }
})

但它不起作用。如果我在 Chrome 控制台中写入$('.selectpicker').selectpicker({})- 出现（打开）正确的组合框，但无法关闭它。谢谢

Answer 1

我在jsfiddle创建了一个工作示例。我发现使用 angular 的 bootstrap-select 插件的方式是：

HTML：

 <div ng-app="myApp">
 <div ng-controller="MyCntrl">
     <select ng-model='color' multiple ng-multiple="true" ng-options='c.name for c in colors' select-multiple></select> 
 </div>
 </div>

控制器：

angular.module('myApp.controllers', [])
  .controller('MyCntrl', ['$scope', function($scope) {
        $scope.colors = [
                    {name:'black'},
                    {name:'white'},
                    {name:'red'},
                    {name:'blue'},
                    {name:'yellow'}
                  ];
        $scope.color = $scope.colors[2]; // red

  }]);

指示：

angular.module('myApp.directives', [])
  .directive('selectMultiple', function() {
    return function(scope, element, attributes){
        element.selectpicker({});

        scope.$watch(function () {
          return element[0].length;
         }, function () {
          element.selectpicker('rebuild');
         });  
          // Watch for any changes from outside the directive and refresh
        scope.$watch(attributes.ngModel, function () {
          element.selectpicker('refresh');
        });
    }
  });

我希望它对你有帮助；）