Bootstrap SelectプラグインがAngular ui router ng-viewでレンダリングされない

Question

Bootstrap Select Pluginを使用して、入力フィールドと複数の選択可能なオプションで拡張選択を作成します。私はそれをui-routerで設定されたAngular 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> 

属性のselectpicker」と「データ・ライブ・サーチは、」動的追加機能を提供するノードを作成するために、ブートストラップをトリガする必要があります。しかし、これをAngularビューに追加すると、何も起こりません。選択は表示されません（style = "display：none;"）。

しかし、私が選択した作品。ここ

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

NG-ビューをコメントアウト、index.htmlをする正確な同じコードを追加 - 追加の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']) 

を含める誰もがここにブートストラップCSS/JSをブロックする可能性がありますどのような手掛かりを持っています？

Answer 1

JQuery + Bootstrap.jsとAngular.jsを混在させるとトラブルが発生します。 （JQuery経由の）ブートストラップは、「要素をつかんで修正する」ことによって動作します。 AngularはDOM要素も変更します - Angularディレクティブ（ブラウザ固有のDOM要素）私が達成しようとしたことは、このように不可能であり、私は、私が望むことを行う角度ライブラリ（ui-select）を使用して終了しました。

Answer 2

あなたの選択にstyle='display:none'を定義したので、期待通りに機能しています。非表示にするには、指示文ng-hideを使用してください。場合によっては、特定の操作にを使用する必要があります。