我使用Bootstrap Select插件创建了一个带有输入字段和多个可选选项的扩展选择。我在一个用UI-ROUTER设置的ANGLE 1.5.3应用程序中使用它。在我需要它的地方它不能在视图中工作。我在该视图中包含的代码如下:
<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>
属性‘选择器’和‘数据实时搜索’应该触发Bootstrap动态创建一个提供额外功能的节点。但是,当我将其添加到Angular 视图中时,没有任何React--选择不可见(style=“Display:None;”)。
但是当我向index.html添加完全相同的代码时,注解掉ng-view
<!--<div ui-view="body"></div>-->
在这里,SELECT起作用了--生成了额外的DOM节点,并且功能与预期一致。我包含了所有必要的内容-BoostRap.css、bootstrap-selt.css、jQuery-2.1.1.、bootstrap.js和bootstrap.selt.js
我突然想到Angular 依赖和Bootstrap之间可能存在冲突-我包括
angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])
谁有线索可以在这里阻止Bootstrap css/js??
3条答案
按热度按时间siv3szwd1#
事实证明,将JQuery+Bootstrap.js和Angular.js混合在一起是自找麻烦。Bootstrap(通过JQuery)的工作方式是“获取元素并修改它”。ANGLE还修改了DOM元素-是一个ANGLE指令(以及浏览器原生的DOM元素)。我试图以这种方式实现的目标是不可能的,最终我使用了一个Angular 库(UI-SELECT),它可以执行我想要的操作。
fcipmucu2#
您在SELECT中定义了
style='display:none'
,因此它可以按预期工作。如果您想隐藏它,请改用指令ng-hide,在某些情况下,您应该使用angular UI执行特定操作ghg1uchk3#
我也在为同样的问题苦苦挣扎。这种方法对我有帮助。希望它能帮助其他人在您的Angular 项目中安装jQuery。
将jQuery导入组件。
在ngOnInit上运行以下代码