Using Tab interface and adding side menu

ionic-v1
1

Hi Ionic members,

I’ve made an application with the tabs interface.

On my 4th tab i’m trying to add a side menu bar.

Here’s what my code from my 4th tab looks like at the moment:

<ion-side-menus>
<ion-side-menu-content ng-controller="profileMenu">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>

    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
      </button>
    </ion-nav-buttons>

  </ion-nav-bar>

  <ion-nav-view animation="slide-left-right"></ion-nav-view>

</ion-side-menu-content> 

<ion-side-menu side="left">
  <ion-header-bar class="bar bar-header bar-assertive">
   <h1 class="title">Profiles</h1>
  </ion-header-bar>
  <ion-content has-header="true">
    <ul class="list">
      <li>
        <a class="item" menu-close nav-clear href="#/tab/home">Homfacts</a>
      </li>
      <li>
        <a class="item" menu-close href="#/tab/facts">f</a>
      </li>
      <li>
        <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
       <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
        <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
       <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
        <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
       <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
      <li>
        <a class="item" menu-close href="#/tab/facts2"></a>
      </li>
    </ul>
  </ion-content>
</ion-side-menu>
</ion-side-menus>


<script id="profile.html" type="text/ng-template">
  <ion-view title="profile">
    <ion-content>
      

    </ion-content>
  </ion-view>
</script>

controller.js

angular.module('starter.controllers', ['ionic'])

.controller('profileMenu', function($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft()
  }
})

app.js

var app = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.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 && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  }
    if (window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleLightContent();
    }
  });
;})



app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
  $ionicConfigProvider.tabs.position('bottom'); 

  $stateProvider
  

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:


  .state('tab.announcement', {
    url: '/announcement',
    views: {
      'tab-announcement': {
        templateUrl: 'templates/tab-announcement.html',
        controller: 'announcementCtrl'
      }
    }
  })

  .state('tab.chat', {
      url: '/chat',
      views: {
        'tab-chat': {
          templateUrl: 'templates/tab-chat.html',
          controller: 'chatCtrl'
        }
      }
    })
    .state('tab.photo', {
      url: '/photo',
      views: {
        'tab-photo': {
          templateUrl: 'templates/tab-photo.html',
          controller: 'photoCtrl'
        }
      }
    })

  .state('tab.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html',
        controller: 'profileCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/announcement');

});

Since i’ve added that code my Profile tab button has stopped working.

How do i integrate the side menu on one of my tab pages?

2

Hey did you got any solution for this…
I am also having the same issue.

I have to use a filter in one of my page.

Please post any solution if you have.