bugfix> angularjs > 投稿

URLの変更に基づいて多くの状態があるWebアプリケーションがあります。 User Management がありますページ(検索 Input を含むコントロール)検索結果に基づいてユーザーをリストします。

特定の User をクリックするとき 、ユーザーの詳細は異なる状態で読み込まれます。私は Button を置きます User Management に戻るページ。

要件は、検索結果を User Management に保持することです User Detail から戻ったときのページページ。

新しいXHRを作成して検索リストを再度取得することなく、この要件を達成するのを手伝ってください。

.state('userManagement', {
    url: '/user-management',
    templateUrl: 'components/userManagement/UserMgmt.view.html',
    controller: 'UserMgmtCtrl',
    controllerAs: 'vm'
  })
  .state('userDetail', {
    url: '/user-detail/:userId',
    templateUrl: 'components/userManagement/UserDetail.view.html',
    controller: 'UserDetailCtrl',
    controllerAs: 'vm'
  })

これを実現するために、ネストされた状態または何かが必要ですか?

回答 1 件
  • 状態に解決を追加して、コントローラーに必要なものを注入できます。

    シングルトンであるため、アンギュラーサービスを使用してコンテンツを格納します。つまり、インスタンス化されるのは1回だけであるため、格納されるデータは常に同じです。

    .state('userManagement', {
        url: '/user-management',
        templateUrl: 'components/userManagement/UserMgmt.view.html',
        controller: 'UserMgmtCtrl',
        controllerAs: 'vm',
        resolve: {
            yourStuff: function (StorageService) {
                return StorageService.getStuff();
            } 
        }
    })
    .state('userDetail', {
        url: '/user-detail/:userId',
        templateUrl: 'components/userManagement/UserDetail.view.html',
        controller: 'UserDetailCtrl',
        controllerAs: 'vm',
        resolve: {
            yourStuff: function (StorageService) {
                return StorageService.getStuff();
            } 
        }
    })
    app.factory("StorageService", function () {
        var yourStuffStorage = {
            "initial": "stuff"
        };
        return {
              getStuff: getStuff,
              setStuff: setStuff
        };
        function getStuff () {
            return yourStuffStorage;
        }
        function setStuff (newStuff) {
            yourStuffStorage = angular.copy(newStuff); 
        }
    })
    app.controller("UserMgmtCtrl", function (yourStuff) {
        console.log("do stuff with your stuff 1", yourStuff);
    });
    app.controller("UserDetailCtrl", function (yourStuff) {
        console.log("do stuff with your stuff 2", yourStuff);
    });
    
    

    なぜサービスをインジェクトし、データをクエリしなかったのか疑問に思っている場合、それは、データをフェッチし(時にはプロミス経由で)、結果をコントローラーに渡すことがui-routerのベストプラクティスと考えられているためですデータがロードされる前にロードします。

    お役に立てれば :)

あなたの答え