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ù</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) {
});