3

This is my plunker 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.

Why are those onExit and onEnter callbacks in the projects state definition not called?

The projects state onExit should be triggered when this state is left and we activate the projects.create state.

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

  });
HelloWorld
  • 4,671
  • 12
  • 46
  • 78
  • Will you please add the plunkr link to view code. – Shashank Agrawal Dec 31 '14 at 09:48
  • I don't see any `onEnter` or `onExit` functions related to create page flow. Also I don't see any `alert()` statement which should trigger on moving to that create state. – Shashank Agrawal Dec 31 '14 at 10:24
  • @ShashankAgrawal Its everything there see the code paste above! I updated the question with more precise info too. – HelloWorld Dec 31 '14 at 11:18
  • I meant that I don't see those onEnter & onExit code in your plunker or I'm looking at wrong place. I'm looking at app.js file. – Shashank Agrawal Dec 31 '14 at 11:56
  • argh... please look at the link at the top of my question :-) I had 40 tabs open... – HelloWorld Dec 31 '14 at 12:02
  • I don't know what is the problem. This is frustrating. I still don't see those `onEnter` & `onExit` callback in the given plunkr link for create page in the `app.js` file. – Shashank Agrawal Dec 31 '14 at 12:08
  • When I click on my pasted above link then I can see the app.js with the onExit/onEnter functions you can NOT? But you can access the plunker? – HelloWorld Dec 31 '14 at 13:02
  • @ShashankAgrawal I have put AGAIN a new shorter plunker link above and pasted all important code of the app.js here on SO. That should be enough. – HelloWorld Dec 31 '14 at 13:14

1 Answers1

5

Okay, I got it now. The first problem is that, if you are using nested views then you can't use onEnter & onExit callbacks there (at view level). You can only use them at state level configuration.

For reference documentation: 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.

Now since, you can't use them at view level, you have to add it to your state config for create page like this:

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

Hope this helps!

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
  • Your code works, thanks. But I do not understand from where you have read that I must put onExit/onEnter on the state level and not views level. The documentation text you quoted speaks about templateUrl, template etc. not callbacks ?! – HelloWorld Dec 31 '14 at 15:32
  • Yes, actually example given in the documentation only uses template/templateUrl and controller in the view level. But they have not used those callbacks anywhere at view level. That means, its clear that we can't use those callbacks at view level. And its logical also, that if there are two named views in a state there is no point of providing separate callbacks for both views since they both will be loaded on activation. And then I confirmed the same after viewing the source code. – Shashank Agrawal Jan 01 '15 at 08:38