3

さて、私はこのplunkrが私の状況をシミュレートしようとしています:

私には3つのタブがあり、ユーザーがテキストボックスに単語を入力し、ボタンをクリックすると、テキストボックスに入力された内容に従って角度サービスがDBから回答(結果)を返すという考えです(このプロセスをシミュレートしましたjson ファイルにデータを要求するため、何を入力しても重要ではなく、常にデータ全体が返されます)、別のビューにテーブルが入力されました。

私の目標は何ですか？さて、タブごとにすべてのビューをそのまま保持する必要があります。つまり、ユーザーがタブをクリックして (状態を変更して) 別のタブに戻ると、要求されたデータ (および検索ボックスに入力されたもの) がそこにある可能性があります。

編集：

私の定義を含む配列があります：

var parentStates = [
      {state : 'tab1', url: '/tab1/', template: 'tab1.html', s: false, d: true},
      {state : 'tab2', url: '/tab2/', template: 'tab2.html', s: false, d: true},
      {state : 'tab3', url: '/tab3/', template: 'tab3.html', s: false, d: true},
      {state : 'tab1.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab2.table', url: '', template: 'table.html', s: true, d: false},
      {state : 'tab3.table', url: '', template: 'table.html', s: true, d: false}
    ];

そして、私は自分の状態を次のように動的に定義します。

parentStates.forEach(function(childName){
        $stateProvider
          .state("home." + childName.state, {
            controller: "itemController", resolve: { $title: function() { return childName.state; } },
            url: childName.url,
            templateUrl: childName.template,
            sticky: childName.s,
            deepStateRedirect: childName.d
          })
      });

状態にのみ粘着性を適用しますhome.tab*.table。これは機能しますが、期待どおりではありません。たとえば、検索ボックスに入力したものは、タブを変更すると消えます。3 つの配列 (後述) のコンテンツをタブごとに保持できるようにする必要があります。それは私の問題です。

私は3つの配列を持っています:

$scope.Model.items;
$scope.Model.filteredlist;
$scope.Model.expenses;

そして、配列のデータをクリアするために呼び出される関数を使用し$scope.clear_arraysます (でも$stateChangeSuccess)。欲しいものを手に入れるのにこれでいいのかわかりません。

優れたangular-ui-router-extras(sticky states)ライブラリを使用する必要があることはわかっていますが、私の場合にそれを適用する方法がわかりません。私は試してみました：

sticky: true,
deepStateRedirect: true,

しかし、動作しません。いくつかのアイデア、いくつかの助け？

編集：

ドキュメントが言うように、私はまさにこの部分が必要です:

... アプリケーション内のタブの状態は、他のタブのいずれかに切り替えたときに終了しません。ユーザーは、ワークフローを中断することなく、タブ間を行き来できる必要があります。

4

1 に答える 1

2

ui-router-extra のスティッキー状態を使用する際に留意すべき設計上の決定事項がいくつかあります。

  1. 状態ごとに名前付きビューを使用し、これらの状態がアクティブになると非表示/表示します。これは考えてみれば... DOM からこれらのビューを完全に削除すると、アプリのその部分の状態はなくなります (たとえば、部分的に入力された入力ボックスを考えてみてください)。次に例を示します。

    <div ng-show="$state.includes('main.tab1')" ui-view="tab1"></div>

  2. タブに共有コントローラーを使用します。スティッキー状態の性質上、状態を共有するには、これを機能させるのが最善です (これまでのところ、私が見つけた唯一の方法です)。この手順は非常に簡単です。コントローラーをサブステートに割り当てないだけで、準備完了です。

以下は、親ルート、コントローラーのない子、およびスティッキー状態を含む、上記の手順を利用した単純な状態定義です。

$stateProvider
.state('main', {
  url: '/',
  controller: 'MainCtrl',
  controllerAs: 'main',
  templateUrl: 'state-main.html'
})
.state('main.tab1', {
  url: '/tab1',
  sticky: true,
  views: {
    tab1: {
      templateUrl: 'state-tab1.html',
    }
  }
})

スティッキー ステートを使用した非常に単純な例を次に示します: http://plnkr.co/edit/SCHExh4DYKFd9Kq3UbaA

あなたのアプリでは、上記の原則を適用し、テーブルのサブステートを削除しました。簡単にするために、自由にテーブルをディレクティブでラップし、親スコープからデータを渡しました。

そのディレクティブの使用法は非常に簡単になりました (より適切に名前を変更してください):

<table-list ng-if="Model.tab1.length > 0" list="Model.tab1" />

Model.tab1状態の要素の配列が含まれていることに注意してくださいtab1(共有コントローラーを思い出してください)。

最後に、スティッキー状態で動作するアプリを次に示します: http://plnkr.co/edit/gLn19DMyKBTwZRMpv6Fo

これが役立つことを願っています:)

于 2015-11-03T20:13:28.790 に答える