hello every one i'm using ionic to build my application and i put slide menu the problem is when i change the view using "stage.go"this work but the slide menu fail. so how i can fixe that ??
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>
You have to use the option enable-menu-with-back-views="true"
on your <ion-side-menus>
directive, as it specifies ionic docs
You can see this plunkr with a working example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With