TypeError: Cannot read property 'controller' of undefined

Question

The first time I navigate to a nested route, I get this exception, "TypeError: Cannot read property 'controller' of undefined"

It causes my app to not work correctly. However, if I navigate around it starts working perfectly.

The below image shows the values of the variables and the line of code that throws has an undefined controller that causes the problems. This code is part of the Ionic Framework.

Click image to see full size

This is my only JavaScript file that defines the only module.

angular.module("sa", ["ionic"])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                window.StatusBar.styleDefault();
            }
        });
    })

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state("login", {
                url: "/login",
                templateUrl: "app/manager/login.html"
            })

            .state("manager", {
                abstract: true,
                url: "/manager",
                templateUrl: "app/manager/menu.html"
            })
            .state("manager.jobs", {
                url: "/jobs",
                views: {
                    "managerContent": {
                        templateUrl: "app/manager/requested-jobs.html"
                    }
                }
            })
            .state("manager.detail", {
                url: "/detail",
                views: {
                    "managerContent": {
                        templateUrl: "app/manager/requested-job-detail.html"
                    }
                }
            });

        $urlRouterProvider.otherwise("/login");
});

This is the login.html that loads correctly. It also allows the button to be clicked and navigate.

<ion-view view-title="Login" >

  <ion-nav-bar class="bar-light"></ion-nav-bar>

  <ion-content class="has-header" >
    <ion-list>
      <ion-item href="#/manager/jobs">
        Manager
      </ion-item>
    </ion-list>
  </ion-content>

</ion-view>

This is the side menu file.

<ion-side-menus enable-menu-with-back-views="false">

  <ion-side-menu-content>
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">

        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>

      <ion-nav-view name="managerContent"></ion-nav-view>

    </ion-nav-bar>
  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <span class="title">Cluber</span>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <ion-item class="item-icon-right" menu-close ui-sref="login">
          <i class="icon ion-ios-arrow-right icon-accessory"></i>Logout
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

This is the file that gets loaded into the menu content when naviaged to.

<ion-view view-title="Dashboard">
  <ion-content has-bouncing has-header="true">
    <ion-list>
      <ion-item class="item-border item-icon-right" ui-sref="manager.detail">
        Clean Apartment
        <i class="icon ion-ios-arrow-right icon-accessory"></i>
      </ion-item>
      <ion-item class="item-border item-icon-right" ui-sref="manager.detail">
        Repair Side Walk 
        <i class="icon ion-ios-arrow-right icon-accessory"></i>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-view>

This is the simplest example I have that always reproduces the JavaScript exception. Again, this only happens the first time the that "manager.jobs" is navigated to.

Answer 1

The problem is with the below line of HTML in the menu.html file. I had this nested inside the <ion-nav-bar>, instead it is required to be a direct descendent of <ion-side-menu-content>.

 <ion-nav-view name="managerContent"></ion-nav-view>

Answer 2

self.isInitialized is actually false, which will set enteringHeaderBar to null (two lines above your highlighted one).

You're setting self.isInitialized to true at the end of the function. That's the reason why it fails the first time, but then works (in the next update it is true and enteringHeaderBar will be set to getOffscreenHeaderBar().