访问 Angular-UI-Router 的 onExit 范围？答案

【问题标题】：Accessing Scope onExit of Angular-UI-Router?访问 Angular-UI-Router 的 onExit 范围？
【发布时间】：2016-01-26 14:23:37
【问题描述】：

我正在寻找以下可能性：

$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() 通过在后端定义的 REST-Service 存储一些范围数据（例如 $scope.my.data）。

编辑：你能给我一个没有$scope.$on ('destroy',.. 的解决方案吗？也许有 ui-router 的 resolve 属性？为什么我不能用onExit，为什么在这里？

【问题讨论】：

标签： angularjs angular-ui-router state exit enter

【解决方案1】：

你可以监听控制器的$destroy$scope事件

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

有关控制器何时在 ui-router 上被实例化和销毁的一些参考，请参阅this question

编辑 1：如果你想访问你的 $state 参数，你可以监听 $stateChangeStart 或 $stateChangeSuccess 事件并执行类似的操作

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

编辑 2： 不能使用 onExit 的原因是，在调用该方法时，状态已经改变。然而，这在下一个主要版本（1.0）中通过添加一个名为 $transition$ 的可注入服务来修复，该服务将提供对状态参数的访问，您可以阅读更多关于 here 的信息

【讨论】：

请考虑 $state.params.stateid 在 $scope.$on('destroy',.. 中不起作用 --> 我需要那个..
那么我相信你需要使用$stateChangeSuccess 事件，我在我的应用程序中做了类似的事情，但通常状态id代表用户，并且用户生活在服务中，这意味着我知道哪个用户通过访问我没有被破坏的服务在页面上。没有单独的状态事件，只是捕获所有事件。
更新了答案，解释了 onExit @Vienna

【解决方案2】：

您可以使用控制器的$destroy 事件，这是控制器生命周期的一部分。

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

【讨论】：

为什么我不能使用 onExit ？
因为您无权访问您的控制器范围。你当然也可以从你的控制器访问你的$stateParams。

【解决方案3】：

你好，你可以使用ui-router的这个事件

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

或使用此事件

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

祝你好运！

【讨论】：

我需要类似“stateBeforeExit”的东西
@Vienna 在这种情况下，您可以使用在处于所需状态时应该更新的（角度）服务，并将其注入 onExit 函数。

【解决方案4】：

我不确定您是否仍然对原因感兴趣，因为已经接受了答案。但我几天前收到了somehow related problem，碰巧看到了这个问题。我觉得以前的答案都没有得到确切的答案，所以我会做我的。如果我的猜测是正确的，那仅仅是因为退出事件根本没有发生（您的问题中没有完整的代码）。

如果您导航到祖先状态或兄弟状态，或祖先的兄弟，则会发生状态退出，但如果您导航到后代状态，则不会发生。 The document 说：

当应用程序处于特定状态时——当状态为“活动”时——它的所有祖先状态也隐式地处于活动状态。

我做了a plnkr来说明；希望它能回答这个问题。

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

【讨论】：