Side Menu application

I’m trying to use the side menu in my app. I want to change the content pane by clicking on list of the side menu.
After a few clicks the transition becomes very slow and the side menu doesn’t close automatically, below you will find the code I’m using.

Have you any idea how to solve this issue?

    <meta charset="utf-8" />
    <title>Hello World</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="css/ionic.css" rel="stylesheet">

    <link href="css/app.css" rel="stylesheet">

    <script src="js/ionic.js"></script>
    <script src="js/angular/angular.js"></script>
    <script src="js/angular/angular-animate.js"></script>
    <script src="js/angular/angular-route.js"></script>
    <script src="js/angular/angular-touch.js"></script>
    <script src="js/angular/angular-sanitize.js"></script>
    <script src="js/ionic-angular.js"></script>

    <script type="text/javascript" src="phonegap.js"></script>

    <script src="js/app.js"></script>

</head>

<body>

    <div ng-controller="MenuController">
        <side-menus>

            <pane side-menu-content>
                <header class="bar bar-header bar-assertive">
                    <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
                    <h1 class="title">Slide me</h1>
                </header>
                <div class="content has-header">
                    <ng-view></ng-view>
                </div>
            </pane>

            <side-menu side="left">
                <header class="bar bar-header bar-dark">
                    <h1 class="title">Men&ugrave;</h1>
                </header>
                <content has-header="true" class="bg-dark">
                    <ul class="list">
                        <a href="#/uno" class="item bg-dark">uno</a>
                        <a href="#/due" class="item bg-dark">due</a>
                        <a href="#/tre" class="item bg-dark">tre</a>
                    </ul>
                </content>
            </side-menu>

        </side-menus>
    </div>

</body>

var tennistico = angular.module(‘tennistico’, [‘ionic’, ‘ngRoute’]);

tennistico.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})

tennistico.config([’$routeProvider’, function($routeProvider){
$routeProvider
.when(’/uno’, {
controller: ‘ContentController’,
templateUrl: ‘uno.html’
})
.when(’/due’, {
controller: ‘ContentController’,
templateUrl: ‘due.html’
})
.when(’/tre’, {
controller: ‘ContentController’,
templateUrl: ‘tre.html’
})
.otherwise ({ redirectTo: ‘/uno’ });
}]);

tennistico.controller(‘MenuController’, function($scope) {
$scope.openLeft = function() {
$scope.sideMenuController.toggleLeft();
};
});

tennistico.controller(‘ContentController’, function($scope) {
});

To solve the side menu doesn’t close automatically issue the only way I can think about it now is adding ng-click="openLeft()" on the <ul class="list"> to listen when someone click on any of the links it toggle it. It would be better if you rename the method to toggleLeft() for example for readability reasons.

Regarding slow transition, I am on the master branch with a 5 menu links in a side menu too with a similar implementation <ng-view> and I am not facing this problem, If you can provide more details I will try to help you. (Are you using jQuery in your project?)

Thank you, i am not using jquery. I verified that if I click twice on one of the lists the transition is instantaneous. Can you post your code.

// controllers.js

angular.module('app', [])

.controller('MainCtrl', function($scope) {
  
  // ToggleMenu
  $scope.toggleMenu = function() {
    $scope.sideMenuController.toggleLeft();
  };

})

// index.html

    <side-menus>

      <!-- Center content -->
      <pane side-menu-content>
        <header class="bar bar-header bar-dark">
          <button class="button icon ion-navicon-round" ng-click="toggleMenu()"></button>
          <h1 class="title">App</h1>
          <button class="button button-icon icon ion-loading-d" id="loading-spinner"></button>
        </header>
        <content has-header="true">
          <ng-view></ng-view>
        </content>
      </pane>

      <!-- Left menu -->
      <side-menu side="left">
        <header class="bar bar-header bar-dark">
          <h1 class="title">Menu</h1>
        </header>
        <content has-header="true">
          <ng-include src="'templates/partials/menu.html'" ></ng-include> 
        </content>
      </side-menu>

    </side-menus>
  </body>

OK thank you now it’s work, i want to ask you what is the best way to change the title of the header when i change the page content.

I am somehow new to AngularJS too, but I think if you created an object (not a primitive type) in the parent controller in this case MainCtrl, as $scope.viewData = {} and then in the child controllers for each view you can add $scope.viewData.title = "Header Title" in the beginning of the controller and printing this property as {{viewData.title}} in the header. I think it should work.

Note: I didn’t test the above code, I am just thinking of it as a concept that should work. For sure if you have another way to do it please share it.

I also had the issue where the sideMenu performance slowly started to degrade after many clicks of the menu items. Initially i was calling toggleLeft() on menu item click but when i changed it to be

$scope.sideMenuController.close();

performance improved dramatically

1 Like

i just committed my first fully working side-menu version on my learning-in-development app

PS: in detail subpages i had to get rid of and use otherwise i had strange disappearance of the icons!

2 Likes