how do i display a page with side-menu using $location?

Question

i'm trying to display a page that has a side-menu. i've tried adding enable-menu-with-back-views="true" to my ion-side-menus but it still does not display the page.

here's my code for the side-menu:

<ion-side-menus enable-menu-with-back-views="true">
<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="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
  <div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header ">
  <ion-list id="menu-list1">
    <ion-item id="menu-list-item1" ui-sref="menu.mainMenu" menu-close="">Main Menu</ion-item>
    <ion-item id="menu-list-item2" ui-sref="menu.seeNearbyCICOs" menu-close="">See Nearby CICOs</ion-item>
    <ion-item id="menu-list-item3" ui-sref="menu.termsAndConditions" menu-close="">Terms and Conditions</ion-item>
    <ion-item id="menu-list-item4" ui-sref="menu.fAQ" menu-close="">FAQ</ion-item>
    <ion-item id="menu-list-item5" ui-sref="menu.contactUs" menu-close="">Contact Us</ion-item>
    <ion-item id="menu-list-item6" ui-sref="menu.help" menu-close="">Help</ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

and here's my controller.js code:

.controller('loginCtrl', ['$scope', '$stateParams', '$location', function ($scope, $stateParams, $location) {

$scope.userdata = {}
$scope.enterlogin = function(usern,pass)
{
    if(usern== "admin" && pass == "bam_1987!")
    {
         $location.path('/page19');
    }
    else
    {
        alert('Please check your credentials.');
    }
}
}])

where /page19 is the url of state menu.help, the page i'm trying to display.

Sonny Jayet Sonny Jayet · Accepted Answer · 2017-03-15T09:59:51

I don't know much about $location, but maybe you have to use this :

$location.path("yourpath")
$scope.$apply()

if you get an error relative to $digest when you use this line , try :

$location.path("yourpath")
setTimeout(function(){$scope.$apply()})

Or , you can use states with ui.router , and then use :

$state.go("yourState")

This is what i use to change pages

how do i display a page with side-menu using $location?

1 Answers