Question

我正在使用AngularJS和Bootstrap的Chosen插件。我还使用了一个自定义指令和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]);
        }
    }
};
}]);

但是当我将此指令应用于选择框时，它会阻止模型使用所选项目进行更新。我尝试使用选择引导程序css和角度选择但无法使其工作。两者都使选择框保持原样（与删除自定义指令相同），这让我相信它是Bootstrap的一个问题。

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

如果你在select元素上删除了“selected-select”类，它可以正常工作但没有正确设置样式。

非常感谢任何帮助。

Answer 1

经过一段谷歌搜索似乎在Angular之前移动jQuery解决了一些其他人的问题，选择+ 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＆amp;选择：选择未使用自定义“已选择”指令更新的模型

1 个答案: