AngularJS with Bootstrap & 选择：Select 模型未使用自定义 "chosen" 指令更新

Question

我将 Chosen 插件与 AngularJS 和 Bootstrap 一起使用。我还使用自定义指令和 Chosen 文档中的代码来使用 Bootstrap:

进行样式设置

app.directive("chosen", [function() {        
return {
    restrict: 'A',
    link: function(scope, element, attrs) {            
        var config = {
            '.chosen-select'           : {},
            '.chosen-select-deselect'  : {allow_single_deselect:true},
            '.chosen-select-no-single' : {disable_search_threshold:10},
            '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
            '.chosen-select-width'     : {width:"95%"}
        };

        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
    }
};
}]);

但是当我将此指令应用于 select 框时，它会阻止模型更新 selected 项目。我试过使用 chosen-bootstrap css 和 angular-chosen 但无法正常工作。两者都没有设置 select 框的样式（与删除自定义指令相同），这让我相信这是 Bootstrap.

的问题

这是在 Plunker 中重现的问题：http://plnkr.co/edit/AE1jo9fiRN1pvU6dKFSI?p=preview

如果删除 select 元素上的 "chosen-select" class，它可以正常工作，但样式不正确。

如有任何帮助，我们将不胜感激。

Answer 1

经过一些谷歌搜索后，似乎在 Angular 之前移动 jQuery 解决了一些其他人关于 Chosen + ng-model 未更新的问题。在我将脚本引用移动到 Angular 之前的 jQuery 之后，你的 Plunker 工作了。

  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" rel="stylesheet" />
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angular.js@1.4.8"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-route.js" data-semver="1.4.8" data-require="angular-route@1.4.8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    <script src="script.js"></script>
  </head>

在此处查看工作中的 Plunker：http://plnkr.co/edit/ISqrJiiYB3a0ATkR1Dei?p=preview

AngularJS with Bootstrap & 选择：Select 模型未使用自定义 "chosen" 指令更新

AngularJS with Bootstrap & Chosen: Select model not being updated with custom "chosen" directive

twitter-bootstrap

angularjs

jquery-chosen

prototype-chosen