angularjs - 当 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 回调没有被调用？

当项目状态 onExit 离开此状态并且我们激活项目.create 状态时，应该触发该状态。

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

好的，我现在明白了。第一个问题是，如果您使用嵌套 View ，则无法在其中使用 onEnter 和 onExit 回调(在 View 级别)。您只能在州级配置中使用它们。

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

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

现在，您无法在 View 级别使用它们，您必须将其添加到状态配置中以创建页面，如下所示:

.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');
    }
  })

希望这有帮助!