[Solved] Side Menu Controller

1

I am trying to create a controller that would handle the logic for the side menu.
Here is my menu template:

<ion-side-menus ng-controller="MenuComponentCtrl">

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-assertive">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
  	<header class="bar bar-header bar-stable">
      <h1 class="title">{{user.Name}}</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
      	<ion-item class="item-icon-left" nav-clear menu-close href="#/app/account">
	      	<i class="icon ion-ios7-person"></i>
        	Account
        </ion-item>
        <ion-item class="item-icon-left" nav-clear menu-close ng-click="logout()">
        	<i class="icon ion-ios7-locked"></i>
        	Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And here is my controller:

(function(angular) {
	'use strict';

	angular.module('controllers.components.menu', ['ionic', 'services.session'])

	.controller('MenuComponentCtrl', function($scope, $state, $ionicLoading, Session) {
		$scope.user = Session.getUser();

		$scope.logout = function() {
			$ionicLoading.show();
			Session.clear().then(function() {
				$ionicLoading.hide();
				$state.go('login');
			}, function() {
				$ionicLoading.hide();
				$state.go('login');
			});
		};
	});
}(angular));

I’ve put break points in the code, and I see that the scope is being populated, but the menu header doesn’t have the user.Name (even though it’s there), and when I click Logout nothing happens. What am I doing wrong?

2

First thing, you using the old syntax. Try this.

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

I did that, but it didn’t change anything.

However, I moved the ng-controller="MenuComponentCtrl" from the top ion-side-menus element to the ion-side-menu element, and it works now.

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>
    <ion-nav-bar class="bar-assertive">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left" ng-controller="MenuComponentCtrl">
  	<header class="bar bar-header bar-stable">
      <h1 class="title">{{user.Name}}</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
      	<ion-item class="item-icon-left" nav-clear menu-close href="#/app/account">
	      	<i class="icon ion-ios7-person"></i>
        	Account
        </ion-item>
        <ion-item class="item-icon-left" nav-clear menu-close ng-click="logout()">
        	<i class="icon ion-ios7-locked"></i>
        	Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>