問題タブ [angular-ui-bootstrap-tab]

Web アプリケーションを作成していて、友達を追加するオプションを実装したいと考えています。テキスト入力フィールドを持つモーダルとして友達追加ページを作成しました。ビューページに入力を表示して、これをテストしたいと思います。このデータをビュー ページに表示するにはどうすればよいですか?

ここに私が現在持っているものがあります

index.html

私のJavaScriptファイル：

plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

Angular UI ブートストラップは素晴らしいソリューションを提供します。残念ながら、ページネーション (ui.bootstrap.pagination) はタブ(ui.bootstrap.tabs)内では機能しません。

デモ http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

Angular UI ブートストラップ タブを操作するディレクティブを作成しようとしています。
このディレクティブの主な目的は、選択されたタブを記憶することです。
私はそこにあるすべてのソリューションを見てきましたが、コントローラーに設定されていないタブのこの問題に対処するものはないようです:

注「sctab」は私のディレクティブ名です。ここで私は次の作業をしています：

• タブがクリックされると、タブの見出し名として URL ハッシュが設定されます
• リンクをクリックして戻ると、そのハッシュが記憶されます。
• ページの読み込み時に、ハッシュに一致するタブ (または要素) を特定します

ただし、最後のステップで障害物に遭遇しました。

• URL ハッシュに一致するタブをアクティブ化する

このために、以下のコードで確認できるいくつかのことを試しました。完全に機能したものはありません。

アクティブ状態は、「アクティブ」と呼ばれるUIブートストラップタブディレクティブのisolate-scope変数に設定されていると思います。

ngClass もこの変数にバインドされています。

したがって、基本的にここでは、タブをアクティブにしようとして、タブに active = true を設定しようとしました（無駄に）。
詳細に入る前に、ここで立ち止まって、私が試したことに基づいたアイデアを誰かが持っているかどうかを確認します。
これが私の指示です：

各タブが ui-router-tabs と ui-router-extras を使用して複数の子状態を持つことができるスティッキー タブの実装に問題があります。

1. 状態を開き、別の状態に移動してから最初の状態に戻ると、対応するコントローラーが再初期化されます (ただし、ui-router-extras デバッグ出力では、状態が再アクティブ化されたと表示されます)。

2. 同じタブ (兄弟状態) の別の状態を開くと、デバッグ出力、url、および html テンプレートの要求は、新しい状態が読み込まれていることを示していますが、タブには空のコンテンツと API 呼び出しが表示されています状態は実行されません

これは私の状態/ルート構成です:

「ホーム」状態には、すべてのタブの UI ビューとナビゲーション バーが含まれています。各抽象状態は 1 つのタブを表し、そのすべての子状態の名前付きビューが含まれています。状態の第 3 レベル (home.feed.list など) は、実際のコンテンツを表しています。

ビューは同じコントローラーを使用していますが、ビューごとに別のコントローラーを追加しようとしました。さらに、ui-router-tabs を削除しようとして、状態を URL で呼び出しましたが、同じ結果でした。

デバッグ出力の例: home.feed.list -> home.create.form -> home.feed.list (写真を投稿するのに十分な評判がありません)

3 つの異なるコントローラーを使用しているときに同じ出力が生成されます (「I am initializing ..」がすべてのコントローラーで実行されます)。

私は現在、2 つのトランスクルージョン セクションを含むディレクティブを作成しようとしていますが、これまでのところ成功していません。今tab、Angular UI Bootstrap のディレクティブがまさにそれを行うことを発見しました! 残念ながら、彼らがソース コードで実行している巧妙な策略は、どうやら私には理解できないほど高度すぎるようです。

例では、次のコードがあります。

これはまさに私が必要とするものです。<tab-heading>コンテンツをある場所でトランスクルージョンし、他のものを別の場所でトランスクルージョンするために必要な手順を誰か説明してもらえますか?

ソースで理解できないこと：

• tabHeadinga のみのディレクティブはありませんtabHeadingTransclude。<tab-heading>では、元素はどのように発見されるのでしょうか。また、そのような要素のクエリはどこにもありません。
• また、2 つの transclude-directivestabContentTranscludeとtabHeadingTransclude.

次のコードは、ポップアップ タイムピッカーを表示しません。修正方法はありますか？

コード：

私たちは、アプリケーションを可能な限りアクセシブルにするよう取り組んでいます。アプリケーション全体を通して、顧客がキーボードとタブに手を置いたままにできるようにする必要があります。angular-ui/bootstrap の水平 navset タブを使用して、各タブパネル内のデータを表示および収集しています。現在、マウス以外でタブからタブ パネルにフォーカスを移動して、選択可能なコンポーネントにフォーカスを移動する方法を見つけることができません。

タブセットは表示専用コンテンツ用に作成されていますか? そうでない場合、タブパネルの編集可能/選択可能なコンポーネントにフォーカスを移すにはどうすればよいでしょうか?

HTML:

JS:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('test', function ($scope) { });

フォーム送信で無効なフィールドを含む最初のタブにフォーカスしようとしています。最初の入力フィールドに集中できましたが、フィールドが別のタブにある場合は機能せず、どうすれば機能するのかわかりません。

これが私のhtmlファイルです：

最初の無効な入力に焦点を当てるディレクティブ:

助けていただければ幸いです。

AngularJs と UI Bootstrap を使用して、動的に生成されたタブのコンテンツで ng-include を使用したいと思います。

ここにプランカーがあります: http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p=preview

JS コード:

プランカーで、[タブの追加] ボタンをクリックします。新しいタブをコレクションにプッシュする $scope の関数を呼び出しますが、ng-include ディレクティブを含む動的に生成されたコンテンツを渡します。予想される出力は、ng-include がタブ コンテンツ エリア内に表示されることです。

ありがとう

angular ブートストラップ ui 静的タブのデフォルト選択の問題に直面しています。

モデルポップアップには、このようなタブが約7つあります。値に基づいてデフォルトのタブを設定したい。私はこのようなことをしました

スクリプトで

問題は、範囲フィールドに関係なく、常に最初のタブを選択することです