Angular ui-router onEnter function not firing

Question

Thanks to some great help from the SO community, I have a working angular SPA that uses multiple states/views using the ui-router library. However I am getting a behavior that seems at odds with the angular-ui-router documentation.

From their docs about onEnter, I would expect that anytime I use $state.go("home"), the onEnter() event tied to that state's config object would kick off, yet I don't see it happen. Example:

/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {

$stateProvider.state('home', {
    url: "/",
    views: {
        'top': {
            url: "",
            template: '<div>top! {{topmsg}}</div>',
            controller: function ($scope) {
                $scope.topmsg = "loaded top!";
                console.log("top ctrl!");
            },
            onEnter: function () {
                console.log("entered bottom state's onEnter function");
            }
        },
        'middle': {
            url: "",
            template: '<div>middle! {{middlemsg}}</div>',
            controller: function ($scope) {
                $scope.middlemsg = "loaded middle!";
                console.log("middle ctrl!");
            },
            onEnter: function () {
                console.log("entered bottom state's onEnter function");
            }
        },
        'bottom': {
            url: "",
            template: '<div>bottom! {{bottommsg}}</div>',
            controller: function ($scope) {
                $scope.bottommsg = "loaded bottom!";
                console.log("bottom ctrl!");
            },
            onEnter: function () {
                console.log("entered bottom state's onEnter function");
            }
        }
    },
    onEnter: function () {
        console.log("entered home state");
    }
  });
}])
.controller('MyAppCtrl', function ($scope, $state/*, $stateParams*/) {
    $scope.statename = $state.current.name;
    $scope.testmsg = "app scope working!";
    console.log("MyAppCtrl initialized!");
    $state.go("home");
});

As you can see from all the onEnter() calls in the state's config objects, my expectation was that when the home state loads, I would start to see a list of all the states/views they were hitting firing off their console messages. However, only the very first entered home state message is being logged, from the home state's onEnter event. Not a single other view's onEnter is being hit. Am I misreading the docs?

Here is a long-awaited fiddle to demonstrate. Just show the console in firebug/chrome devtools and you will see the lack of console output.

Any help would be great. I'm using angular 1.2 and ui-router 0.2.0. Thanks in advance!

Answer 1

Two things:

• The onEnter method applies to states, not views. You have in your definition one state and 3 views, and for some reason you've attempted to attach URLs to your views.

• In order for a state to be entered, it first has to be exited. (A) You never actually leave the home state (since you only have one state definition to begin with), so you can never re-enter it. (B) It appears that you're actually trying to create child states within home. Even if you fix your syntax, it still won't work, because when you enter the child state of a parent, by changing to a different child state within the same parent, you still never actually leave the parent state, hence no re-triggering of onEnter.