0

我正在使用带有 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]);
        }
    }
};
}]);

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

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

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

任何帮助将非常感激。

4

1 回答 1

1

在 Angular 解决其他人的 Chosen + ng-model 未更新问题之前，经过一番谷歌搜索之后似乎移动了 jQuery。在我将脚本引用移到 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

于 2015-12-16T05:01:11.460 回答