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＆amp;那里有onExit个回调（在视图级别）。您只能在州级配置中使用它们。

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

如果你定义了一个视图对象，你的状态是templateUrl，模板和 templateProvider将被忽略。所以在你需要的情况下这些视图的父布局，可以定义一个抽象状态包含一个模板，以及布局状态下的子状态包含'views'对象。

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

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

希望这有帮助！

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

1 个答案: