This is the state configuration:
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'
})
});
The nv
and its sub states will have no physical views or controllers.
I want them to serve as links that calls certain functions.
Service for calling logout methods:
angular.module('grabhutApp')
.factory('$grabhutAccountService', function ($state, $grabhutDataService) {
var methods = {
.
.
logoutUser: function () {
$grabhutDataService.user.removeSession();
$state.go('account.main', {}, {location: 'replace'});
}
.
.
};
return methods;
});
Then a button/link for logout:
<a ui-sref="nv.logout" class="button icon icon ion-log-out button-large" menu-close></a>
What I want to happen is that, when state nv.logout
was triggered the
$grabhutAccountService.logoutUser()
must be called and must redirect to 'account.main'
Here is what I've done so far:
I tried to use resolve in nv.logout
.state('nv.logout', {
url: '/logout',
resolve: {
logout: function ($grabhutAccountService) {
$grabhutAccountService.logoutUser();
}
}
})
The service was called but state did not redirect. So I tried another way. I added a controller:
.state('nv.logout', {
url: '/logout',
resolve: {
logout: function ($grabhutAccountService) {
$grabhutAccountService.logoutUser();
}
},
controller: function ($scope, $state) {
$scope.$on('$stateChangeSuccess', function () {
$state.go('account.main');
});
}
})
But $stateChangeSuccess
is not being fired.
So I tried to use the rootScope:
.run(function(...., $grabhutAccountService){
.
.
.
$rootScope.logout = function(){
$grabhutAccountService.logoutUser();
};
.
.
.
})
And the use it like this:
<a ng-click="$root.logout()" class="button icon icon ion-log-out button-large" menu-close></a>
This works fine. But I'm worrying since (AFAIK) rootScope loads more data which could cause slower operation.
Besides, whenever I need some kind of function like above, I would have to attach function in rootScope again.
And I think that's not a good approach. BTW, I'm building this in phonegap that's why memory usage is so important.
Ooooh you're so close. I rearranged some of your code and arrived at this:
app.run(function($rootScope, $grabhutAccountService) {
$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
if (toState.name === 'nv.logout') {
$grabhutAccountService.logoutUser();
$state.go('account.main');
}
});
});
The next major version of UI-Router will have much improved hooks for doing this sort of thing.