2016-05-17 80 views
1

我使用引导选择插件来创建带有输入字段和多个可选选项的扩展选择。我在使用ui-router设置的Angular 1.5.3应用程序中使用它。它在我所需要的视图中不起作用。我包括在该视图代码:引导选择插件不会在Angular ui路由器中呈现ng-view

<select name="jobdomainTeamId" 
     class="form-control selectpicker" 
     data-live-search="true" 
     multiple="" 
     style="display: none;" 
     ng-model="data.detailView.jobDomain.teams" 
     ng-options="team.id as team.displayName for team in data.detailView.teams" 
> 
    <option value="">No selection</option> 
</select> 

属性“selectpicker”和“数据实时搜索”应该触发引导动态创建,可提供额外的功能性的节点。但是,当我将其添加到Angular视图时,没有任何反应 - 选择不可见(style =“display:none;”)。

但是,当我完全相同的代码添加到index.html的,注释掉NG-视图

<!--<div ui-view="body"></div>--> 

这里选择的作品 - 额外的DOM节点生成,并如预期功能。 我包括所有必要的东西 - Boostrap.css,bootstrap-select.css,jquery-2.1.1,bootstrap.js和bootstrap.select.js

我想到了角度依赖关系和引导 - 我包括

angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm']) 

有没有人有线索什么可能会阻止Bootstrap css/js在这里?

回答

1

原来,将JQuery + Bootstrap.js与Angular.js混合使用会造成麻烦。Bootstrap(通过JQuery)通过“抓取元素并修改它”来工作。 Angular也修改DOM元素 - 是一个Angular指令(以及一个浏览器本地DOM元素)。我试图实现的是不可能的,我最终使用了一个Angular库(ui-select)来做我想做的事情。

1

您在您的选择中定义了style='display:none',以便按预期工作。如果您想隐藏它,请改为使用指令ng-hide,在某些情况下,您应该使用angular UI进行特定操作