Hello everyone, I am currently using Ionic to develop my application and have implemented a slide menu. However, I encountered an issue where the slide menu fails to work when changing views using "$state.go". How can I resolve this?
The Router :
"use strict";
var app=angular.module('monApplication', ['ionic']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
app.config(function($stateProvider, $urlRouterProvider) {
var cheminMenu="HorsConnexion/"
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/HorsConnexion/menu.html",
})
.state('app.Aide', {
url: "/Aide",
views: {
'menuContent': {
templateUrl: "templates/Commun/Aide.html"
}
}
})
.state('app.Apropos', {
url: "/Apropos",
views: {
'menuContent': {
templateUrl: "templates/Commun/Apropos.html"
}
}
})
.state('app.Connexion', {
url: "/Connexion",
views: {
'menuContent': {
templateUrl: "templates/HorsConnexion/Connexion.html",
controller: 'connexionCtrl'
}
}
})
.state('app.inscription', {
url: "/inscription",
views: {
'menuContent': {
templateUrl: "templates/HorsConnexion/inscription.html",
controller: 'inscriptionCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/Aide');
});
The Menu :
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-item nav-clear menu-close ui-sref="app.Connexion">
Connexion
</ion-item>
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.Aide">
Aide
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.Apropos">
A propos
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The Controller for Connexion :
"use strict";
app.controller('connexionCtrl', function($state,$scope,$location, $ionicModal, $timeout, $http,connexionService){
$scope.connexionData = {};
$scope.inscription = function() {
$state.go('app.Aide');
};
});
Page Connexion :
<ion-view view-title="Connexion">
<ion-content>
<div class="list">
<form ng-submit="Connexion()" role="form" name="form1">
<label class="item item-input">
<span class="input-label">Adresse mail</span>
<input type="text" ng-model="connexionData.Mail" required>
</label>
<label class="item item-input">
<span class="input-label">Mot de passe</span>
<input type="password" ng-model="connexionData.password" required>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-disabled="form1.$invalid">Se connecter</button>
</label>
</form>
<label class="item">
<button class="button button-block button-positive" ng-click="inscription()">Inscription</button>
</label>
</div>
</ion-content>
</ion-view>