When I navigate using state.go in my controller, the Ionic slide menu fails to appear

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>

Answer №1

In order to enable the menu with back views, you need to use the

enable-menu-with-back-views="true"
option in your <ion-side-menus> directive. This information can be found in the Ionic documentation

For a demonstration of this functionality, you can view this example on Plunker.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing connections in neo4j with the neo4j-nodejs API

I encountered an error while creating a relationship between two nodes that were generated within the code. Can someone advise me on the correct arguments for the function below and its proper formatting? node1.createRelationshipTo(node2, "some", {age:" ...

In Vue Js, the function createUserWithEmailAndPassword does not exist within _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default

My createUserWithEmailAndPassword function seems to be malfunctioning. Here is the code snippet I am using - config.js import firebase from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' const firebaseCon ...

A guide to incorporating border radius to images within a composite image with sharp.js in Node.js

In my Node.js project, I am using the sharp library to combine a collection of images into a single image. Although I have successfully created the composite image, I now need to add a border radius to each of the images in the grid. Here is the code snip ...

Gradient on multiple faces in Three.js

I'm currently struggling with creating an HSV cylinder using three.js. I am facing difficulties in properly mapping the gradient to the faces of the cylinder. Initially, I attempted to create my object in this manner: https://i.sstatic.net/WboAE.png ...

When the toggle enabled div is clicked, the drag event is triggered

My draggable div has a "splitter" for expanding and collapsing, but it should only do so on double click or drag. However, when I single click the splitter while the div is collapsed, it repositions to around 10px width. I've attempted using 'st ...

Error in jQuery submenu positioning issue

I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right. Here is an example: <ul class="menuFirst"> <li><im ...

What is the best way to generate a unique bootstrap card for every piece of submitted data?

I am trying to figure out how I can create a dynamic bootstrap card for each submitted data. When the form is submitted, a new card will be created and the data will be stored in that card. Each piece of data will be displayed in a column format similar to ...

The Facebook Customer Chat Plugin embedded within an iframe

Can the Customer Chat Plugin be used within an iframe? When adding content-security-policy: frame-ancestors IFRAME_DOMAIN, it displays the message Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Se ...

Include a Custom Button with an Optional Event Handler

I've created a customized material-ui button component: type ButtonProps = { disabled: boolean; text: string }; export function CustomButton({ disabled, text }: ButtonProps) { return ( <Button type="submit" disabled={disabled} ...

When a page loads, automatically refreshing a row in MySQL

I've been searching around, but haven't found a solution to my basic issue. I need help with creating a system where a user can only view a page once per day. Currently, clicking a button updates the MySQL Row, but users can bypass this restricti ...

Just for laughs: "The react-redux context value seems to be playing hide and seek; make sure to wrap the component in a <Provider> for it to show up!"

I encountered an issue while attempting to run a basic Jest test on a form React component: ● <LoginForm /> › clicking the validate button › should display page title ...

Fade in/out or apply opacity to a three.js object

I'm working on a graphical web project using three.js. I have many circles scattered like this. https://i.sstatic.net/y4FN8.png I'm curious if the opacity of objects can be reduced as the distance between the object and camera increases (fade ...

Activate the Select List to Appear Only When a Search is Conducted

Currently, I have implemented the react-select API in order to provide language options for selection. <Select isMulti name="langs" options={langOptions} defaultValue={{ value: "English", label: "English", nativeNam ...

Unable to remove the specified row from the AngularJS table

I'm experiencing an issue with a table where I dynamically insert rows with edit and delete links for each row. The edit functionality is working fine, but when it comes to deleting a row, it always deletes the first one. Below is the code snippet: ...

Displaying image while processing substantial ajax data

I implemented code to toggle the display of a loading image on my web page while making ajax requests. $(document).ajaxStart(function(){ $("#please_wait").css("display","block"); }); $(document).ajaxComplete(function(){ $("#please_wait").css(" ...

Updating Button Color Based on Input Field Value in EJS

How can I change the color of a button in EJS when the input value changes? <div> <textarea name="mytextarea" id="inputcontent" cols="30" rows="3" style="margin-top: 10px; margin-bottom: 10px; f ...

Steps for integrating an Angular 2 App into Express.js as a view

I am currently working on developing an Angular 2 app that requires data from a script running on the server. To achieve this, I am attempting to integrate my existing Angular app as a view within an express application, similar to the process demonstrated ...

Issue with page layout arises due to a problem with AngularJS directive

I recently downloaded the Ace Admin template from As I tried to integrate it into my AngularJS project, I encountered a problem when using specific parts of the template in custom directives. To isolate and simplify the issue, I created a plunker at https ...

React: The value selected in the <select> dropdown was passed as an [object Object]

I'm encountering an issue where I am attempting to pass an object that is being mapped through a combo-box. However, instead of passing the actual object, it is passing the value of [object Object]. When I console log the object, it displays the corre ...

Utilize JavaScript on the browser to cache videos, potentially exceeding 10 minutes in length, directly

Currently, I am experimenting with WebRTC and looking to share a video stream with multiple peers. To optimize this process, I believe it would be beneficial to cache certain parts of the video. After exploring Cache Web APIs, I found them to be less effe ...