1

「カスタム ポータル」を設計していますが、アプリケーションを正しい方法で設計する方法に行き詰まっています。ポータルには、次の図のようなビューがあります。

  1. ユーザーが「現在の」ショッピング カートを選択できるショッピング カート ドロップダウン (空にすることができます)
    • a. 「現在の」ショッピング カートの詳細ページにリダイレクトするボタン。
  2. アプリケーションメニュー。fe からカタログに移動できる場所
  3. 主なアプリケーション領域。 ここに画像の説明を入力

次のワークフローがあります。

  • ユーザーはカタログ メニューに移動します。

    url:ドメイン/カタログ; 状態:カタログ

  • ユーザーがカタログを選択し、カタログ内の製品を表示します

    URL:ドメイン/カタログ/catalog1ID ; 状態: catalogs.detail。

  • ユーザーは製品タイルをクリックして製品詳細ビューに移動できます

    URL:ドメイン/カタログ/catalog1ID/product1ID ;状態: catalogs.detail.product

自然に見え、今のところ特別なことは何もありません。ここでの主な問題は、このワークフローに「ショッピング カート」機能を統合する方法です。ユーザーがショッピング カートを選択すると、ビューのデータが異なる可能性があることを意味します (ショッピング カートはさまざまな顧客に関連しており、さまざまな顧客に対してさまざまなカタログ/価格/製品を表示できるため)。Fe Catalog1 の Product1 の価格は、ショッピング カート 1 とショッピング カート 2 およびショッピング カートが選択されていない場合に異なる場合があります。次の質問に対する答えを見つけようとしています。

  • 選択したショッピング カート (状態/URL) をどこに保持しますか?
  • ショッピング カートが変更された現在の状態を通知する方法は?
  • F5/refresh を正しく機能させる方法 (現在の状態がcatalogs.detail.productで、ショッピング カートが選択されている場合)?
4

1 に答える 1

0

多くの質問に答える必要があるように思えます。正しい方向に向けるためのガイダンスを提供しようと思いますが、もちろん、これはアプリケーションに合わせて調整する必要があります。

  1. スコープを常に視野に入れます。たとえば、トップ レベルのスコープ (rootScope) にショッピング カートのデータが格納されているとします。アプリ内の他の状態は、これらの rootScope プロパティにアクセスできます。したがって、複数の状態にまたがって持続するデータが必要な場合は、rootScope のようなものに格納すると、子状態へのアクセスが可能になります。すべてのデータをアプリの rootScope に保存するのはおそらく良い考えではないことに注意してください。個々のコントローラーにデータを保存し、カスタム ディレクティブにそれらのコントローラーへのアクセスを許可する方がはるかに理にかなっています。これにより、物事がよりモジュール化され、グローバルな rootScope が汚染されなくなります。

  2. これは、ショッピング カート データを保持するスコープを変更するディレクティブ内に関数を作成することで簡単に実行できます。

サンプル ディレクティブ:

app.directive('pagedirective',function(){
  //directive definition object
  return{ 
    restrict:'E'
    templateUrl:'path to html template'
    link:function(scope){

      scope.update_Shopping_Cart_In_Controller = function(item){
        scope.shopping_Cart_Array.push(item)
      }
    }  

  }
})

サンプルコントローラー:

app.controller('shoppingCartCtrl',function($scope){
  //this will get updated from the directive
  $scope.shopping_Cart_Arr = [];
})

メインページのhtml:

<div ng-controller="shoppingCartCtrl">
  <p ng-repeat="items in shopping_Cart_Arr">{{items}}</p>
  <pagedirective></pagedirective?
</div>

ディレクティブ html:

<div>
  <button ng-click="update_Shopping_Cart_In_Controller('new toy')">add item</button>
</div>

明らかに、ディレクティブ html をこれよりもはるかにスマートにする必要がありますが、ディレクティブからコントローラーにデータを渡すパターンが欲しかっただけです。

  1. アプリでページを更新すると、ロード時にコントローラー内で初期化されていないデータが失われます。たとえば、あるページでショッピング カート コントローラーにアイテムを追加してからブラウザーを更新すると、そのコントローラーに追加されたデータは失われます。この問題を解決するためのいくつかのアプローチを次に示します。

    • データを sessionStorage または localStorage に保存します。このデータは更新中に失われることはなく、コントローラー内でデータを初期化するために使用できます。
    • アプリのバックエンド内のユーザー テーブルにデータを保存し、必要に応じてそのデータを取得します。

不明な点があればお知らせください。うまくいけば、これで正しい方向に進むことができます。

于 2016-03-30T14:58:18.083 に答える