引导选择插件不在Angular UI路由器ng-view中渲染

lf3rwulv  于 2022-10-24  发布在  Angular
关注(0)|答案(3)|浏览(140)

我使用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??

siv3szwd

siv3szwd1#

事实证明,将JQuery+Bootstrap.js和Angular.js混合在一起是自找麻烦。Bootstrap(通过JQuery)的工作方式是“获取元素并修改它”。ANGLE还修改了DOM元素-是一个ANGLE指令(以及浏览器原生的DOM元素)。我试图以这种方式实现的目标是不可能的,最终我使用了一个Angular 库(UI-SELECT),它可以执行我想要的操作。

fcipmucu

fcipmucu2#

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

ghg1uchk

ghg1uchk3#

我也在为同样的问题苦苦挣扎。这种方法对我有帮助。希望它能帮助其他人在您的Angular 项目中安装jQuery。

npm i --save-dev @types/jquery

将jQuery导入组件。

declare var $: any;

在ngOnInit上运行以下代码

ngOnInit(): void {
    $('.selectpicker').selectpicker('refresh'); 

  }

相关问题