角JS。多选 JQuery 插件答案

【问题标题】：AngularJS. Multiple select JQuery plugin角JS。多选 JQuery 插件
【发布时间】：2013-11-19 16:33:19
【问题描述】：

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

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

        element.selectpicker({

        })
    }
})

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

【问题讨论】：

如果您在页面element 中的angular 之前加载了jQuery 已经是一个jQuery 对象，因此无需执行$(element[0]);。在 jsfiddle.net 或 plunker 中创建一个复制问题的演示
如果directive 有template 或使用ng-repeat 生成子元素，则直到下一个$digest 循环才会呈现。在这种情况下，您可能需要添加一个setTimeout 或$timeout，间隔为0，并在其中执行element.selectpicker()，以确保在调用selectpicker 函数之前HTML 存在。

标签： angularjs twitter-bootstrap select

【解决方案1】：

我在jsfiddle 中创建了一个工作示例。我发现使用带有角度的 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');
        });
    }
  });

希望对你有帮助；）

【讨论】：

请提供小提琴链接
它在小提琴中工作，但我没有在项目中尝试过，因为我已经实现了这个插件github.com/amitava82/angular-multiselect谢谢你的帮助。
我尝试了解决方案，但未设置我的 ng-model。我需要做一个 ngModel.$render 吗？
这里有同样的问题。未设置 ngModel。有什么解决办法吗？