Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic slide menu don't appear when i use state.go in my controller

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>
like image 230
dakmar1 Avatar asked Mar 17 '23 10:03

dakmar1


1 Answers

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.

like image 73
atc Avatar answered Apr 24 '23 18:04

atc