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',..的解决方案，可能还有ui-router的 resolve 属性？为什么我不能使用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上实例化和销毁的一些参考，请参阅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的原因是因为在调用该方法时，状态已经更改。但是，通过添加名为 $transition$ 的可注入服务来修复状态参数，可以在下一个主要版本（1.0）中修复此问题，您可以阅读更多关于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

我不确定你是否对这个原因感兴趣，因为接受了答案。但是我在somehow related problem天前遇到了这个问题。我觉得以前的答案都没有得到确切的答案，所以我要制造我的。如果我的猜测是正确的，那只是因为退出事件根本没有发生（你的问题中没有完整的代码）。

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

当应用程序处于特定状态时 - 当状态为＆＃34;活动＆＃34; - 其所有祖先状态也是隐式活动状态。

我让a plnkr来说明;希望它能回答这个问题。

＆＃13;

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

＆＃13;

访问Angular-UI-Router的ScopeExout？

4 个答案: