SideMenu: Cannot read property 'enableAnimation' of undefined


#1

When attempting to $scope.sideMenuController.toggleLeft() I get the following error:

Cannot read property 'enableAnimation' of undefined

This was after a recent upgrade to the latest Ionic today. Am I missing a file or something?


#2

Are you using the nightly builds?

sideMenuController has been renamed $ionicSideMenusController


#3

I updated to the latest version available on the Ionic website when clicking the “download” button.


#4

I think I saw this earlier; it was due to a small mistake. Are you sure you’re using ion-side-menu-content instead of side-menu-content?


#5

Yes, I am using ion-side-menu-content:

<ion-side-menus>
  <ion-pane ion-side-menu-content>
  </ion-pane>
  <ion-side-menu side="left">
    Foo
  </ion-side-menu>
</ion-side-menus>

#6

Can you make a codepen with the error, then? Then we could figure it out.


#7

Apparently this.content is undefined in Ionic.js:7003. Do I need to have this side-menu within some other construct so that the content will be set?


#8

Anyone have any ideas on this? Did anything change here recently? Here is my HTML. I’m on Ionic 0.9.27:

<ion-content>
<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-tabs tabs-style="tabs-icon-only" tabs-type="tabs-assertive" ng-controller="TabsController">
      <ion-tab title="Inbox" badge="inboxCount()" icon="icon ion-android-inbox" href="#/tab/inbox">
        <ion-nav-view name="inbox-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Yours" badge="yoursCount()" icon="icon ion-android-contact" href="#/tab/yours">
        <ion-nav-view name="yours-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Waiting" badge="waitingCount()" icon="icon ion-clock" href="#/tab/waiting">
        <ion-nav-view name="waiting-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Replied" icon="icon ion-reply" href="#/tab/replied">
        <ion-nav-view name="replied-tab"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-pane>

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

  <ion-side-menu side="right">
    Foo
  </ion-side-menu>
</ion-side-menus>
</ion-content>
$scope.sideMenuController.toggleLeft();