Side menu link ui-sref not working

ionic-v1
1

The menu is not working properly, once you click the menu list, its not going to different state or page.
e.g. ui-sref=“app.list”

menu.html

i<ion-side-menus >
<ion-side-menu-content ng-controller="NavController">

  <ion-nav-bar class="nav-title-slide-ios7 bar-clear menu-color">
    <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>

  </ion-nav-bar>
  <ion-nav-view name="app-dash" animation="slide-left-right"></ion-nav-view>

</ion-side-menu-content>
<ion-side-menu side="left" ng-controller="NavController">

  <ion-header-bar class="bar bar-header bar-dark bar-hz">
    <h1 class="title">Menu</h1>
  </ion-header-bar>
  <ion-content has-header="true">
    <ul class="list">
      <a ui-sref="app.dash" nav-clear class="item item-icon-left" ng-click="toggleLeft()"><i class="icon ion-ios-home-outline"></i>Home</a>

      <a ui-sref="app.list" nav-clear class="item item-icon-left" ng-click="toggleLeft()"><i class="icon ion-ios-paper-outline"></i>list</a>
      <a ui-sref="app.account" nav-clear class="item item-icon-left" ng-click="toggleLeft()"><i class="icon ion-ios-gear-outline"></i>settings</a>

      <a ui-sref="home" nav-clear class="item item-icon-left" ng-click="toggleLeft()"><i class="icon ion-ios-close-empty"></i>Close</a>
    </ul>
  </ion-content>
  <!--
  <ion-footer-bar class="bar bar-footer bar-hz bar-balanced" >
    <a ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>

  </ion-footer-bar>
  -->

</ion-side-menu>

js file

.state(‘app’, {
url: ‘/home’,
abstract: true,
templateUrl: ‘templates/menu.html’,
controller: “AppController”
})

// setup an abstract state for the tabs directive
.state(‘tab’, {
url: ‘/tab’,
abstract: true,
templateUrl: ‘templates/tabs.html’,
controller: “TabCtrl”
})

// Each tab has its own nav history stack:

.state(‘app.dash’, {
url: ‘/about’,
views: {
‘app-dash’: {
templateUrl: ‘templates/dashboard.html’,
controller: ‘DashCtrl’
}
}
})

.state(‘app.list’, {
url: ‘/list’,
views: {
‘tab-chats’: {
templateUrl: ‘templates/tab-chats.html’,
controller: ‘ChatsCtrl’
}
}
})
.state(‘tab.chat-detail’, {
url: ‘/list/:chatId’,
views: {
‘tab-chats’: {
templateUrl: ‘templates/chat-detail.html’,
controller: ‘ChatDetailCtrl’
}
}
})

.state(‘app.account’, {
url: ‘/settings’,
views: {
‘tab-account’: {
templateUrl: ‘templates/settings.html’,
controller: ‘AccountCtrl’
}
}
});

$stateProvider
.state(‘home’, {
url: ‘/’,
controller: ‘landingCtrl’,
templateUrl: ‘templates/landing.html’
});

2

At a guess, try removing ng-click="toggleLeft()" and adding the menu-close attribute instead. As per https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html

I might be wrong but I’m presuming the ng-click is disabling the behaviour of ui-sref

3

Hi,

when i am trying to call close button, its working… for others its not working.

<a ui-sref="home" nav-clear class="item item-icon-left" ng-click="toggleLeft()"><i class="icon ion-ios-close-empty"></i>Close</a>

you can check my code here
https://github.com/asimkh/apps/blob/master/Hazzir/www/templates/menu.html

4

I tried below code but i think something to do with ionic view.
as side menu is not able to call the updated state :frowning:

 <ion-list>
    <ion-item nav-clear menu-close href="#/home/settings">
        Search
    </ion-item>
    <ion-item nav-clear menu-close href="#/home/about">
        Playlists
    </ion-item>