Angular-UI-路由器退出时访问范围？

Question

我正在寻找以下可能性：

$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 服务存储一些范围数据（例如 $scope.my.data） .

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

Answer 1

您可以收听控制器的 $destroy $scope 事件

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

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

编辑 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

Answer 2

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

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

阅读更多 What is the lifecycle of an AngularJS Controller?

Answer 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;
});

祝你好运！

Answer 4

我不确定你是否仍然对原因感兴趣，因为已经接受了一个答案。但是我天前拿到了一个，正好看到这个问题。我觉得 none 之前的答案得到了准确的观点，所以我会做我的。如果我的猜测是正确的，那只是因为退出事件根本没有发生（你的问题中没有完整的代码）。

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

When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well.

我做了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>

Angular-UI-路由器退出时访问范围？

Accessing Scope onExit of Angular-UI-Router?

state

enter

exit

angularjs

angular-ui-router