問題タブ [angular-ui-router-extras]

クリストパー、

クライアントのリストを考えて、動的に生成されたタブを持つユースケースが、ui-router エクストラのタブのソリューションで機能するかどうか疑問に思っていましたか? 問題は、あなたの例が実行時に生成され、追加したルートが構成時にあるため、私の状況では機能しない名前付きの ui-views を使用していることです。

前もってありがとう、ルイス

私は ui-router とui-router-extrasを使用する AngularJS アプリケーションを持っています。そこでは、状態間のいくつかの遷移がインターセプトされ、別のものにリダイレクトされます。

基本的に、$stateChangeStartイベントがトリガーされると、アプリはその遷移が許可されているかブロックする必要があるかを確認し、ユーザーを別の場所にリダイレクトします (例: ログイン ダイアログ、プロセスのステップの欠落など)。トランジションをキャンセルすることもできます。

傍受は次のように機能します。

そして、これはこれまでのところうまく機能しています。問題は$previousState、遷移をキャンセルしない場合と同じように、状態の変更をキャンセルするときに、 がキャンセルを認識せず、現在の状態を以前の状態として登録することです。なので基本的$previousStateに遷移解除は意識していません。これにより、プログラムで前の状態に戻ろうとすると、$state==のため移動しません$previousState。

ここでライブ デモを作成しました: http://plnkr.co/edit/dXjj2iSwDU1DtPMuqW1W?p=preview

基本的に、Step1をクリックしてからConfirmをクリックすると、アプリは遷移をキャンセルし、確認するかどうかを尋ねます。確認すると、本来の状態に遷移します。実際のアプリでは、これは行われませんconfirmが、同じ方法で回答をブロックできないカスタム オーバーレイを使用して行われることに注意してくださいconfirm。

お気づきのように、上部のバーには と の内容を示す 2 つのラベルが$stateあり$previousStateます。confirmプロンプトをキャンセルする$previousStateと、移行が行われなかったにも関わらず、「Step1」への変更が表示されます。

どうすればこれを回避できますか?

以下は、モーダル構造とともに私のアプリ構造のサブセットです。アプリの構造:

//同じ構成ファイルでドット表記 (.) で定義されている A の子

私の2番目の構成ファイルには同様の状態構成がありますが、ここでは状態Bは親属性によって定義された状態Aaの子です。これは、継承階層を表す長い文字列を持ちたくなかったためです(AaBなど、一連の状態が同様にネストされているため) )

モーダル構造: 閉じるボタンを持つ抽象的なグローバル モーダルと、以下のような他のテンプレートをホストする ui-sref があります。

次に、次のようにグローバルモーダルの ui-view=childModal にロードされる2つのネストされた状態があります（要するに）

今問題：

Bb 状態でモーダルを開くと C がロードされ、それを閉じるとスティッキーは正常に動作しますが、Bb からモーダルを再度開き、今度は背景の背後で C からサブ状態 D に移動すると、親に移動します状態 (Aa) モーダルを閉じると誰でも Bb に移動しますが、ページは更新されます。(このナビゲーションを C から D へのモーダルで Aa の上に実行すると、C から D へのナビゲーションは常に背景の後ろに Aa をロードするため、ページが更新されないため、モーダルで遷移を行うときに更新が行われませんトップステートAaの上にあるが、BbなどのAaのサブステートの上にあるモーダル内のトランジションは、参照とスティッキーが機能しない原因となる[各ステートにsticky:trueを入れようとしても、再び同じ動作]

複数の記事を開いてタブで編集できる、angularjs の表構造ベースの cms を設計しています。記事には articleController を使用しています。各記事の URL パラメータ (主に記事 ID) は異なります。

私はこれらのタブを粘着性にしようとしています。

以下は私が書いたコードです:

メインコントローラー:-

main.html

ダッシュボードコントローラー

そのため、ユーザーはタブからさまざまな記事を編集するための新しいタブを追加できます。

複数の記事が同じコントローラーを使用しているため、ある記事から別の記事にタブを切り替える際に、複数の記事がタブ スティッキー状態にある場合の問題が機能しません。助言がありますか？

複数のタブに分散された HTML フォーム要素を含むページがあります。ユーザーがフォーム要素に入力したデータを失うことなくタブを切り替えられるようにしたい (また、不必要なデータのリロードを節約したい)。そして、特定のタブへのリンクを誰かに渡すことができるようにしたいと考えています。

ui-extras のスティッキー状態は、私が必要としているものを正確に実行する必要があるようです。私がそれを機能させるのに非常に失敗したことを除いて。

サンプルのソース コードを調べて、サンプルを起動すると、たとえば、controllers.js の 57 行目にある在庫コントローラーのコンストラクターに firebug でブレークポイントを設定すると、コンストラクターが 1 回だけ起動されることがわかります。ただし、コントローラー コンストラクターは何度も起動され、スティッキー状態が存在しない場合とほとんど同じようにアプリケーションが動作しますが、スティッキー状態のデバッグを有効にすると、何かを実行していることがわかります (状態の非アクティブ化と再アクティブ化)。

この回答のコメントで、スティッキー状態は名前付きビューでのみ機能すると述べている人を見つけたので、ビューに名前を付けようとしましたが、違いはありませんでした。

タブの前に明示的な「ルート状態」を挿入してみました。

ng-controller または状態のコントローラー定義によって、コントローラーを挿入しようとしました。

github の例は素晴らしい見せびらかしですが、最小限以上のものであり、実際に何が必要で何が必要でないかを理解するのが難しくなっています。

スティッキー ステートを使い始めるために必要な最小限の例は何ですか? (ボーナス: 私のコードの何が問題なのですか?)。

参考までに、失敗した試行の plunkr をここに示します(以前の試行の選択を確認するには、履歴を参照してください)。

これが私の現在の失敗したソースコードです:

私は自分のウェブサイトに簡単なブログ セクションを作成しているので、投稿テンプレートに動的にリンクする、posts という名前の名前空間が必要です。これらの投稿にはそれぞれ独自のテンプレート (つまり posts/some_post.html ) があります。これは、json データを使用して一般的なテンプレートを設定するにはあまりにも異なるためです。

本番環境で投稿できるように、各投稿へのリンクを作成できる名前空間が必要です: mysite/posts/my_new_post. ただし、投稿を .state URL の先頭に追加すると、モジュールのインスタンス化に失敗するというエラーが発生します。

これは、作業コードのスニペットです。

このコードは機能し、生成された URI にリンクできます。このリンクをクリックすると:

URI は website/blog2 になり、website/home から URI にリンクできます

ただし、名前空間を追加しようとすると失敗します。

リンクは初めて動作し、正しいページに連れて行ってください。ただし、URIパターンmySite/posts/blog1を入力すると、：[$ injector：modulerr]エラー、およびこの奇妙なsyntaxerror：予期しないトークン<

どういうわけか角度をロードしていません。誰もアイデアを持っていませんか?