問題タブ [angular-bootstrap]

これは何度も取り上げられており、ほとんどの記事で次のコードが参照されています: AngularJS のカスタム URL を使用したモーダル ウィンドウ

しかし、私はそれを理解していません。私はそれが非常に明確であるとはまったく思いません。私はまた、これがURLを追加せず、戻るボタンを使用してモーダルを閉じることを可能にすることを除いて、実際には素晴らしく、非常に役立つこのjsfiddleを見つけました。

編集：これは私が助けを必要としているものです。

それでは、私が達成しようとしていることを説明してみましょう。新しいアイテムを追加するフォームがあり、「新しいアイテムを追加」リンクがあります。「新しい項目を追加」をクリックすると、作成したフォーム「add-item.html」が表示されたモーダルがポップアップ表示されます。これは新しい状態なので、URL は /add-item に変わります。フォームに入力してから、保存するか閉じるかを選択できます。閉じる、モーダルを閉じます :p (奇数) . ただし、モーダルを閉じて前のページ (状態) に戻るためにクリックすることもできます。 モーダルを実際に機能させるのにまだ苦労しているので、この時点で Close の助けは必要ありません。

これは私のコードです。

ナビゲーション コントローラー: (これはモーダル関数を配置する正しい場所でもありますか?)

これは私がモーダルをアクティブにする方法です：

new-item.html:

また、これはモーダルを開きますが、それを解決できなかったため、閉じません。

ここでTabs (ui.bootstrap.tabs)説明されている control\directiveを使用しています。コントロールは、アクティブなタブを設定する独自のコントローラーを作成します。

タブセットの子タブ コントロール (子要素) をクリックすると、親の選択機能をトリガーできます。

最初のタブをアクティブに設定するためにselect関数をトリガーする必要があるDOMの上にカスタムコントローラーがあります。TabsetControllerイベントブロードキャストを使用できることを読みましたが、TabsetControllerイベントリスナーをバインドするように変更できないため、これは実行可能なオプションではないようです。助言がありますか？

編集：

理解を深めるために、Plunker を参照してください。

テスト アプリケーション バックエンドのコードをリファクタリングした後に問題が発生しました。テストには質問と回答があり、各質問には複数の回答があり、そのうちの 1 つだけが正解です。

いくつかのデバッグの後、すべてが正常に機能しているように見えますが、ロジックを管理するすべての質問と回答は 1 つのコントローラーに配置されていました。ネストされたコントローラーを分離するように回答ロジックを移動した後、この問題に固執しました。さまざまな方法を試しましたが、どれも役に立ちませんでした。

目標は、Angular UI ツリー (例 #4 - グループとカテゴリ) を Angular UI Bootstrap Modal と結合することです。

設計上、質問と回答の追加と編集はモーダル ウィンドウで行われます。テンプレートは個別に配置されているため、質問と回答ごとに繰り返されることはありません。提供されたデータが有効でない場合、検証エラーが表示されます。それ以外の場合は、成功アラートが表示され、すべてのフィールドがクリアされ、デフォルトの状態に戻ります (モーダル ウィンドウ内で発生するすべてのことは、開いたままになり、[キャンセル] を押すことによってのみ閉じることができます。 X ボタンまたはキーボードの Esc ボタン)。

モーダル ウィンドウから更新する必要がありQuestionsCtrl $scope.questionsます (トリガー ボタンはモーダル ウィンドウのテンプレート内にあります)。「追加」ボタン$scope.questionsを押すとスコープが更新され、ui.tree もバックグラウンドで更新されます。成功アラートまたは検証エラーは表示されず、フォーム フィールドはクリアされません。繰り返しクリックしても、実際の関数が再度呼び出されることはありません (したがって、1 回だけ実行されます)。

モーダルウィンドウはありませんが、ネストされたコントローラーを追加すると正常に機能します。

plunkを作成し、冗長なコードをすべて削除したので、問題に集中しやすくなりました。必要に応じて、さらにコードを提供できます。たとえば、plunk の結果はconsole.log1 回だけ表示されます。

AngularJS ディレクティブでブートストラップ UI を使用しており、その要素に適用されるデフォルト スタイルのブートストラップを変更したいと考えています。

テンプレートから HTML コンテンツをターゲットにする必要がありますか?

ドキュメントに記載されている例に基づいて、アコーディオンを使用したいと考えています。

HTMLで定義すると、次の構造になります。

しかし、ディレクティブがテンプレートを処理すると、次の HTML に変換されます。

ご覧のとおり、かなり大きく変わります。パネル タイトルの表示方法を変更したい場合、css ファイルに記述する必要がありますか?

テンプレートが将来変更されないことを願っていますか?

ディレクティブのテンプレートによって生成された HTML 要素のスタイルを変更する最良の方法は何ですか?

I'm using tooltips for the error explanation and coloring to indicate errors. On my datepicker fields, I have some validations about date range that I need to show. However if I try to put the datepicker and the tooltip on the same input element I get

Multiple directives [datepickerPopup, tooltipHtmlUnsafe] asking for new/isolated scope on: <input

This wasn't a problem until I "upgraded" to angular-bootstrap from the old version that used the bootstrapjs code to deal with the tooltips.

Is there some easy way I can use the focus on the datepicker input to cause the tooltip to pop, even when the input field can't get the tooltip directive?

Right now I have it as a hover on the label which is about as obvious as a subliminal message on your TV.

I have a field directive with an isolate scope that covers the input and the label associated with it, so that is the kind of context I have to work with.

これが機能していないことを示すために、小さなプランカーを作成しました。typeahead を 1.3.0 angularJS で使用する方法を教えてください / 代替ソリューションを提供してください。angular-bootstrap 0.11.0 と最新バージョンのブートストラップで使用しています。私たちのコードは、1.3.0 で導入された ng-messages に大きく依存しています。

プランカーのリンクはこちら

ご覧のとおり、クリック イベント、上向き矢印、下向き矢印は機能しません。SOを幸せにするためにいくつかのコードを追加します。:)