Bootstrap Select 插件未在 Angular ui 路由器 ng-view 中呈现

Question

我使用 Bootstrap Select 插件创建一个带有输入字段和多个 select 选项的扩展 select。我在 Angular 1.5.3 应用程序中使用它，该应用程序设置了 ui-router。它在我需要它的视图中不起作用。我在该视图中包含的代码：

<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' 和 'data-live-search' 应触发 Bootstrap 以动态创建提供额外功能的节点。但是当我将它添加到 Angular 视图时没有任何反应 - select 不可见 (style="display: none;").

但是当我将完全相同的代码添加到 index.html 时，注释掉 ng-view

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

此处 select 有效 - 生成了额外的 DOM 节点并且功能符合预期。我包括了所有必要的东西 - Boostrap.css、bootstrap-select.css、jquery-2.1.1.、bootstrap.js 和 bootstrap.select.js

我想到 angular 依赖项和 Bootstrap 之间可能存在冲突 - 我包括

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

有人知道什么可能会阻塞 Bootstrap css / js 吗？？

Answer 1

您在 select 中定义了 style='display:none'，因此它按预期工作。如果您想隐藏它，请使用指令 ng-hide instead, in some case you should use angular UI 进行特定操作

Answer 2

事实证明，将 JQuery + Bootstrap.js 与 Angular.js 混合是自找麻烦。 Bootstrap（来自 JQuery）由 'grabbing an element and modifying it' 创作。 Angular 也修改 DOM 元素 - 是一个 Angular 指令（以及浏览器原生的 DOM 元素）。我试图通过这种方式实现的目标是不可能的，我最终使用了一个 Angular 库（ui-select）来完成我想要的。

Bootstrap Select 插件未在 Angular ui 路由器 ng-view 中呈现

Bootstrap Select Plugin does not render in Angular ui router ng-view

angularjs

bootstrap-select