2016-01-26 33 views
5

I'am alla ricerca del seguente opzione:Accesso all'ambito di uscita di Angular-UI-Router?

$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() memorizza alcuni dati di ambito (ad esempio $ scope.my.data) attraverso un definito REST-service presso il backend.

EDIT: Mi potete dare una soluzione senza $scope.$on ('destroy',.. magari con determinazione proprietà di ui-router? Perché non posso usare onExit, perché è qui?

risposta

7

È possibile ascoltare la $destroy$scope caso di vostro controller

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

E per un po 'di riferimento di quando non regolatore di ottenere un'istanza e distrutto su ui-router, vedere this question

EDIT 1 : Se si desidera accedere ai parametri $ stato è possibile ascoltare gli eventi $stateChangeStart o $stateChangeSuccess e fare qualcosa di simile a questo

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

EDIT 2: La ragione per cui non è possibile utilizzare onExit è perché per il momento che il metodo viene chiamato lo Stato è stato già cambiato. Tuttavia, questo è risolto nella prossima versione principale (1.0) con l'aggiunta di un servizio iniettabile chiamato $transition$ che fornirà l'accesso ai parametri dello stato, si può leggere di più su questo here

+0

prega di considerare che '$ state.params.stateid' non funziona all'interno di' $ portata $ su ('distruggere', .. '-.> Ho c'è bisogno che .. –

+0

Quindi credo che sia necessario utilizzare l'evento '$ stateChangeSuccess', faccio qualcosa di simile nelle mie applicazioni ma normalmente l'id dello stato rappresenta qualcosa come un utente, e quell'utente vive all'interno di un servizio, cioè so che l'utente era nella pagina accedendo al mio servizio che non viene distrutto Non ci sono eventi di stato individuali, basta prendere tutto –

+0

ok, grazie .. –

1

È possibile utilizzare l'evento $destroy del controller , che fa parte del ciclo di vita del controller.

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

saperne di più per What is the lifecycle of an AngularJS Controller?

+0

Perché non posso utilizzare su Exit? –

+0

Perché non si ha accesso all'ambito del controller. Ovviamente puoi accedere al tuo '$ stateParams' anche dal tuo controller. –

1

Hi è possibile utilizzare questo evento di ui-router

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

o utilizzare questo evento

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

Good Luck!

+0

Ho bisogno di qualcosa come "stateBeforeExit" –

+0

@Vienna in questo caso è possibile utilizzare un servizio (angolare) da aggiornare mentre ci si trova nello stato richiesto e iniettarlo nella funzione onExit. – TERMIN

+0

Grazie, buona idea :) –

0

Non sono sicuro che tu sia ancora interessante sul motivo dato che c'è una risposta accettata. Ma ho ricevuto uno somehow related problem giorni fa e mi è capitato di vedere questa domanda. Sentivo che nessuna delle risposte precedenti aveva il punto esatto, quindi dovevo fare il mio. Se la mia ipotesi è corretta, è semplicemente perché l'evento di uscita non è avvenuto affatto (non c'è codice completo nella tua domanda).

L'uscita di stato si verifica se si naviga verso stati antenati o stati fratelli o fratelli di un antenato, ma non accade se si naviga verso uno stato discendente. The document dice:

Quando l'applicazione è in uno stato particolare, quando uno Stato è "attivo" -tutti dei suoi stati antenate sono implicitamente attivo pure.

Ho fatto a plnkr per illustrare; spero che possa rispondere alla domanda.

<!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>