問題タブ [angular-ui-bootstrap]

Angular UI Bootstrap ( http://angular-ui.github.io/bootstrap/#/accordion )でアコーディオンを構築しようとしています。オン選択したアコーディオン グループに従ってモデルを設定するにはどうすればよいですか。UI Bootstrapテンプレートを使用する実用的なソリューションを見つけました。

私のコードでは、テンプレートを追加します<script type="text/ng-template" id="template/accordion/accordion-group.html">

このテンプレートでは、{{heading}}set byを使用できます<accordion-group heading="{{group.title}}" content="{{group.content}}" ng-repeat="group in groups"></accordion-group>。

しかし、他のカスタム テンプレート変数を設定するにはどうすればよいでしょうか? content="{{group.content}}"アコーディオンタグにも設定してみました。設定しても使い方がわからず、試してみ{{content.group}} {{content}}たり{% content %}。

完全なコード: http://plnkr.co/dSIVGg64vYSTAv5vFSof

この plnkrは、「AngularJS - ダイアログでコントローラーを開く (動的に読み込まれるテンプレート) 」という質問に答えるときに作成しました。

サンプル アプリが行うことは、テンプレートに基づいて独自のコントローラーを使用してダイアログ ボックスを起動することだけです。ダイアログが最初に起動すると、すべてが期待どおりに機能します。ただし、ダイアログを閉じた後、ダイアログを再起動しようとすると、モーダル背景が表示されますが、ダイアログは表示されません。thenjavascript コンソールで、返された promiseのメソッドがすぐに呼び出されることを確認できます$dialog.open()が、背景は削除されず、エラーは報告されません。私は完全に困惑しています。

ダイアログは angular-ui ブートストラップドキュメント ページで繰り返し開いたり閉じたりできます。

どこで私は間違えましたか？

HTML:

JS:

レールでAngular uiブートストラップのカスタムテンプレートを使用するにはどうすればよいですか?

つまりpagination、たとえば使用すると、templates/pagination/pagination.htmlテンプレートが検索されます。

問題は、レールがそのパスでテンプレートを提供しないことです。実際にはヘルパーassets/templates/pagination/pagination.htmlを使用する必要があります。<%= asset_path(....) %>

angular ui ブートストラップ javascript ファイルをハッキングするのも 1 つの方法ですが、新しいバージョンを入手するたびにハッキングする気はありません。

サードパーティのディレクティブ (具体的にはAngular UI Bootstrap )を少し変更したいと思います。paneディレクティブのスコープに追加したいだけです。

しかし、Angular-Bootstrap を Bower と合わせて最新の状態に保ちたいとも思っています。を実行するとすぐにbower update、変更を上書きします。

では、このディレクティブをこの bower コンポーネントとは別に拡張するにはどうすればよいでしょうか?

次のように使用されるBootstrap UI Modalconfirmation-dialog-headerを開くディレクティブを作成したいと思います。

これが私がやろうとしていることです（CoffeeScript）：ライブデモ

残念ながら、モーダルはデフォルトでは非表示になっておらず、ボタンをクリックしても何の効果もないようです。

どんな助けでも大歓迎です。

ライブデモ

confirmationDialogHeader次のように使用されるディレクティブを作成しました。

ボタンをクリックすると、確認ダイアログが開き、ユーザーが確認すると、 を呼び出しdeleteItem($index)てダイアログを閉じます。

私の問題は最後のビットにあります：ダイアログを閉じます。

コントローラー (CoffeeScript) は次のとおりです。

そして、ここにディレクティブがあります：

ご覧のとおり、ダイアログは終了後に閉じられずdeleteItem()、実行$scope.confirmationDialog = offされます。

興味深いのは、 を$scope.items.splice(index, 1)でラップすると$timeout、ダイアログが適切に閉じられることです。

なぜこの$timeoutラッピングがここで必要なのですか?

いつコードをラップするべきかについてのガイドラインはあります$timeoutか?

を使用するこのディレクティブの作業バージョン$dialog。

Angular UI Bootstrap を使用してポップオーバーを作成していますが、ポップオーバー内に閉じるボタンを追加するオプションが見つかりません。

ポップオーバー テンプレートをカスタマイズして、閉じるボタンを含めました。しかし、ポップオーバーを閉じる関数/イベントがまだ見つかりません。isOpenを false に設定すると、関数が上書きされるだけで初めて機能しますが、その後は使用できなくなります。

テンプレートスクリプトは次のとおりです。

「POPOVER WITH CLOSE」ボタンの「クリック」イベントをトリガーする閉じるボタンのディレクティブを作成することを考えましたが、それが従うべきアプローチであるかどうかはわかりません。

従うべき正しいアプローチは何ですか？

ユーザーがボタンをクリックしたときにダイアログを開こうとしています。ダイアログ テンプレートにブートストラップ ドロップダウンを追加すると、最初のクリック ([ダイアログを開く] ボタンから) がすぐに返されることがわかりました。[ダイアログを開く] ボタンを 2 回 (3 回目、4 回目、...) クリックすると、すべてが期待どおりに機能します。

不足している初期化コードはありますか?

HTML

script.js

スタイル.css

問題を示すプランカーは次のとおりです。

http://plnkr.co/edit/lJy5l6vlLycP4VlSiObE?p=preview

私は Angular を初めて使用し、Angular-UI-Bootstrap を AngularJS と組み合わせて動作させるという基本的な問題を抱えています。これは単純な例で、イベント処理に ng-change を使用し、ポップオーバーを持つ通常の入力フィールドです。ポップオーバー属性がなければ、コードは正常に機能します。ポップオーバー属性が追加されると、ポップオーバーは正しく表示され、問題なく表示されますが、入力フィールドの値が変更されたときに、イベント ハンドラーが呼び出されず、パスワード モデルも更新されません。

イベント処理コードとポップオーバーを含むボタンがある場合など、同じ問題が発生します。ポップオーバーを使用しない場合も同じ問題がありますが、ツールチップです。

私は ui-bootstrap-tpls-0.3.0.js と AngularJS v1.0.7 を使用しています。

誰かが問題が何であるか知っていますか?