Scope issues


#1

Hey guys, I’ve been trying to implement a Side Menu w/ the ability to slide and w/ a button to open the left menu. Like the gif here: http://ionicframework.com/docs/angularjs/controllers/side-menu/

I’ve been going through the examples on the site and on codepen and couldn’t get them to work w/ my implementation. They suggested:

$scope.toggleMenu = function() {
  $scope.sideMenuController.toggleLeft();
};

Point of failure is $scope.sideMenuController.toggleLeft(); I’m getting sideMenuController is undefined.

Here’s the codepen, if you pull up the console and click the top left button you can recreate. I can see sideMenuController under $scope->$$ChildHead->sideMenuController


#2

Hi,
MainCtrl scope do not have the sideMenuController.
Place yout method in a Ctrl in the sidemenu template

    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html",
      controller: function($scope) {
              $scope.toggleMenu = function() {
             $scope.sideMenuController.toggleLeft();
       };
      }
    })

#3

I’m having the same undefined issue using the code provided by ionic.

My state already has:

.state('mystate', {
        url: '/mystate',
        templateUrl: 'templates/mystate.html',
        controller: 'myctrl'
    })

And the controller has

.controller('myctrl', ['$scope', '$rootScope', '$ionicViewService', function($scope, $rootScope, $stateParams, $ionicModal, $ionicViewService){

  $scope.toggleMenu = function() {
    console.log($scope.sideMenuController);
    $scope.sideMenuController.toggleLeft();
  }
}])

The mystate.html file is the same as the ionic example. The menu works fine, but cannot call sideMenuController as it’s undefined. (This is also a similar problem with many other built in ionic stuff being undefined). So how can I fix the issue without adding a function to my state, instead opting for the controller.


#4

I don’t think the docs have quite caught up with the beta release.

As of Beta 1.0.0 you can (or perhaps should?) use: $ionicSideMenuDelegate, like so:

.controller('MenuController', function ($scope, $state, $location, $ionicSideMenuDelegate, MenuService) {

        // toggle the left menu
        $scope.toggleLeftSideMenu = function() {
            $ionicSideMenuDelegate.toggleLeft();
        }

#5

I still get “undefined” when calling these ionic functions. Is there an include I’m missing somewhere in my app.js angular.module specific to these?

$ionicSideMenuDelegate = undefined


#6

I know this is a bit old now, but it sounds like you’re missing ‘ionic’ from your module definition.

var app= angular.module("app", ['ionic']);

Hope this helps someone!