在angularjs ui路由器中保留状态时,不会调用onEnter和onExit

Question

这是我的傻瓜http://plnkr.co/edit/GMfMcXgHguYjFYoxWEaM

1.) click the above live demo link
2.) click the "create" button which should activate the projects.create state
3.) an alert() should pop up now but it does not.

为什么没有调用项目状态定义中的onExit和onEnter回调？

当剩下这个状态并且我们激活projects.create状态时,应该触发项目状态onExit.

app.js

   .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/projects');

        $stateProvider
      .state('projects', {
        url: '/projects',
        views: {
          'menu@""': {
            template: 'Start your projects!'
          },
          'content@': {
            templateUrl: "projects.html",
            controller: 'ProjectsController',
            onEnter: function(){
              alert('hello onEnter');
            },
            onExit: function(){
              alert('hello onExit');
            }
          }
        }
      })
      .state('projects.create', {
        url: '/create',
        views: {
          'outer@': {
            templateUrl: 'projects.create.html',
            controller: 'ProjectWizardController'
          }
        }
      })
      .state('projects.selected', {
        url: '/:projectId'
      })

  });

Answer 1

好的,我现在明白了.第一个问题是,如果您使用嵌套视图,那么您不能在那里使用onEnter&onExit回调(在视图级别).您只能在州级配置中使用它们.

参考文档:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#views-override-states-template-properties

如果定义视图对象,则将忽略状态的templateUrl,template和templateProvider.因此,如果您需要这些视图的父布局,则可以定义包含模板的抽象状态,以及包含"视图"对象的布局状态下的子状态.

既然如此,你不能在视图级别使用它们,你必须将它添加到你的创建页面的状态配置中,如下所示:

.state('projects', {
    url: '/projects',
    views: {
      'menu@""': {
        template: 'Start your projects!'
      },
      'content@': {
        templateUrl: "projects.html",
        controller: 'ProjectsController'
      }
    }
  })
  .state('projects.create', {
    url: '/create',
    views: {
      'outer@': {
        templateUrl: 'projects.create.html',
        controller: 'ProjectWizardController'
      }
    },
    onEnter: function(){
       alert('hello onEnter');
    },
    onExit: function(){
        alert('hello onExit');
    }
  })

希望这可以帮助!