2016-05-17 81 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進行特定操作