All geek questions in one place

Access to onExit Angular -UI-Router scope

I am looking for the following opportunity:

$stateProvider.state('user', angularAMD.route({ url: '/user/:id', templateUrl: 'views/user.html', controllerUrl: 'views/user', controller: 'UserCtrl', onExit: function () { alert ("exit user"); // call scope function saveCurrentStateData(); } }));

saveCurrentStateData () stores some area data (for example, $ scope.my.data strong>) through a specific REST service on the server.

EDIT: Can you give me a solution without $scope.$on ('destroy',.. , perhaps using the property to enable ui-router? Why can't I use onExit , why is it here?

+5
source share
4 answers

You can listen to your controller $destroy $scope event

 var UserCtrl = function ($scope) { $scope.$on('$destroy', function() { // Do your cleanup here or call a function that does }); };

And for some reference, when the controller receives the instance and is destroyed on ui-router, see this question

EDIT 1: If you want to access the $ state parameters, you can listen to the events of $stateChangeStart or $stateChangeSuccess and do something like this

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState,fromParams) { if(fromState.name == 'yourstate'){ // Here is your param console.log(fromParams.stateid); } });

EDIT 2: The reason you cannot use onExit is because the state was already changed by the time this method was called. However, this is fixed in the next major version (1.0) by adding an injection service called $transition$ , which will provide access to state parameters, you can learn more about this here

+7
source

You can use the $destroy event of your controller, which is part of the controller's life cycle.

 // In controller $scope.$on('$destroy', function iVeBeenDismissed() { // say goodbye to your controller here $scope.saveCurrentStateData(); })

Read more about What is the life cycle of an AngularJS controller?

+1
source

Hi, you can use this ui-router event

 $scope.$on('$stateChangeStart', stateChangeStart(event, toState, toParams, fromState) { // enter your code here; });

or use this event

 $scope.$on('$stateChangeSuccess', stateChangeSuccess(event, toState, toParams, fromState) { // enter your code here; });

Good luck

+1
source

I'm not sure that you are still interesting for this reason, as there is an answer. But I got some kind of related issue a day ago and ran into this issue. I felt that none of the previous answers received exact instructions, so I had to make my own. If my assumption is correct, it is simply because the exit event did not happen at all (there is no complete code in your question).

The exit from the state occurs if you go to the predecessor states or states of kinship or relative of the ancestor, but it does not happen if you go to the state of the descendant. The document says:

When an application is in a certain state - when the state is "active" - ​​all its ancestor states are also implicitly active.

I did plnkr to illustrate; hope he can answer the question.

 <!DOCTYPE html> <html ng-app="demo"> <head> <meta charset="utf-8" /> <title>Demo</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> <script> let app = angular.module('demo', ['ui.router']); app.config(['$urlRouterProvider', '$stateProvider', function ($up, $sp) { $sp.state(state1); $sp.state('state1.state2', state2); $sp.state('state1.state3',state3); $up.otherwise('/'); }]); let state1 = { name: 'state1', url: '/', controller: function () {}, template: `<p>I am state1</p> <div ui-view="state2view"> <a ui-sref="state1.state2"> Jump to state1.state2</a> </div> <div ui-view="state3view"> <a ui-sref="state1.state3"> Jump to state1.state3</a> </div>`, onExit: function(){alert('Goodbye state1')} }; let state2 = { name: 'state1.state2', views: { state2view: { controller: function () {}, template: 'I am state1.state2' } }, onExit: function(){alert('Goodbye state1.state2')} }; let state3 = { name: 'state1.state3', views: { state3view: { controller: function () {}, template: 'I am state1.state3' } }, onExit: function(){alert('Goodbye state1.state3')} }; </script> </head> <body> <ui-view></ui-view> </body> </html>
0
source

Source: https://habr.com/ru/post/1241502/

More articles:


All Articles