web-dev-qa-db-ja.com

anglejsで状態をリダイレクトする

これは状態構成です：

_angular
    .module('grabhutApp', [...])
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            // ACCOUNT
            .state('account', {
                abstract: true,
                url: '/account',
                templateUrl: 'index.html'
            })
            .state('account.main', {
                url: '',
                templateUrl: 'views/account/account.login.html',
                controller: 'AccountController'
            })
            .
            .
            .
            // NO VIEWS
            .state('nv', {
                abstract: true,
                url: '/nv'
            })
            .state('nv.logout', {
                url: '/logout'
            })  
    });
_

nvとそのサブ状態には、物理​​的なビューやコントローラーはありません。
特定の関数を呼び出すリンクとして機能させたい。

ログアウトメソッドを呼び出すためのサービス：

_angular.module('grabhutApp')
    .factory('$grabhutAccountService', function ($state, $grabhutDataService) {

        var methods = {     
            .
            .
            logoutUser: function () {
                $grabhutDataService.user.removeSession();
                $state.go('account.main', {}, {location: 'replace'});
            }
            .
            .
        };

        return methods;
    });
_

次にログアウト用のボタン/リンク：

_<a ui-sref="nv.logout" class="button icon icon ion-log-out button-large" menu-close></a>  
_

私がしたいのは、状態_nv.logout_がトリガーされたときに
$grabhutAccountService.logoutUser()を呼び出し、_'account.main'_にリダイレクトする必要があります

これが私がこれまでにしたことです：
_nv.logout_でresolveを使用しようとしました

_.state('nv.logout', {
    url: '/logout',
    resolve: {
        logout: function ($grabhutAccountService) {
            $grabhutAccountService.logoutUser();
        }
    }
}) 
_

サービスは呼び出されましたが、状態はリダイレクトされませんでした。だから私は別の方法を試しました。コントローラーを追加しました：

_.state('nv.logout', {
    url: '/logout',
    resolve: {
        logout: function ($grabhutAccountService) {
            $grabhutAccountService.logoutUser();
        }
    },
    controller: function ($scope, $state) {
        $scope.$on('$stateChangeSuccess', function () {
            $state.go('account.main');          
        });
    }   
})  
_

しかし、_$stateChangeSuccess_は解雇されていません。
それで私はrootScopeを使おうとしました：

_.run(function(...., $grabhutAccountService){

    .
    .
    .
    $rootScope.logout = function(){
        $grabhutAccountService.logoutUser();
    };
    .
    .
    .

})  
_

そしてこのように使用してください：

<a ng-click="$root.logout()" class="button icon icon ion-log-out button-large" menu-close></a>

これは正常に機能します。しかし、（AFAIK）rootScopeがより多くのデータをロードし、動作が遅くなる可能性があるため、心配しています。
その上、上記のような関数が必要なときはいつでも、rootScopeに関数を再度アタッチする必要があります。
そして、それは良いアプローチではないと思います。ところで、私はこれをphonegapで構築しているので、メモリ使用量が非常に重要です。

angularjsstateangular-ui-routerionic-frameworkrootscope
8
fiberOptics

ああ、あなたはとても近いです。私はあなたのコードのいくつかを再配置し、これに到達しました：

app.run(function($rootScope, $grabhutAccountService) {
   $rootScope.$on('$stateChangeSuccess', function (evt, toState) {
     if (toState.name === 'nv.logout') {
       $grabhutAccountService.logoutUser();
       $state.go('account.main');
     }  
   });
});

UI-Routerの次のメジャーバージョンでは、この種のことを行うためのフックが大幅に改善されます。

10
Chris T