Side menu controller doest work on tabs


#1

I created an app with tabs. Inside on of them I put a side menu with a button which call a function to toogle the side menu. But it doest work. Im using:

   controller('ListTabCtrl', function($scope, Pets, Users) {

  $scope.pets = Pets.all();
  $scope.user = Users.all();  
  $scope.openLeft = function() {
    $scope.sideMenuController.toggleLeft();
  };
})

and the html is:

 <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animate-nav="false" ng-controller="ListTabCtrl">
  <!-- List products tab -->
    <tab title="Lista" icon="icon ion-home">
      <side-menus>      
        <side-menu side="left">
          <header class="bar bar-header bar-positive">
            <h1 class="title">{{ user.name }}</h1>
          </header>
          <content has-header="true">
            <ul class="list">
              <span class="item">
                Productos
              </span>              
              <a href="#" class="item">
                Cuenta
              </a>
              <a href="#" class="item">
                Cerrar sesión
              </a>
              <a href="#" class="item">
                Ayuda
              </a>
              <a href="#" class="item">
                Acerca de...
              </a>
            </ul>
          </content>
        </side-menu>
        <pane side-menu-content>
          <header class="bar bar-header bar-positive">
            <button class="button" ng-click="openLeft();"><i class="icon ion-navicon"></i></button>
            <h1 class="title">Daunter <span id="alpha">Alpha</span></h1>
            <button class="button button-icon" ng-click="showSearch = ! showSearch"><i class="icon ion-search"></i></button>
          </header>
          <div ng-show="showSearch" class="bar bar-header item-input-inset bar-positive">
            <label class="item-input-wrapper">
              <i class="icon ion-ios7-search placeholder-icon"></i>
              <input type="search" placeholder="Search">
            </label>
            <button ng-click="showSearch = ! showSearch" class="button button-clear">
              Cancel
            </button>
          </div>
          <content has-header="true" has-tabs="true" scroll="true">
            <list can-reorder="true">
              <item ng-repeat="pet in pets">
                  <h3>{{pet.title}}</h3>
                  <p>{{pet.description}}</p>
                </item>
              </item>
            </list>
          </content>
        </pane>
      </side-menus>
    </tab>

    <!-- New product tab -->
    <tab title="Nuevo" icon="icon ion-ios7-plus">
      <content has-header="true" has-tabs="true">
        <div class="padding">
          <h2>Adopt a pet today.</h2>
        </div>
        <div class="list list-inset">
          <label class="item item-input">
            <span class="input-label">Your name</span>
            <input type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Your email</span>
            <input type="password">
          </label>
          <label class="item item-input">
            <textarea placeholder="Any more info?"></textarea>
          </label>
          <button class="button button-positive button-block">Adopt</button>
        </div>
      </content>
    </tab>

    <!-- Pleasures tab -->
    <tab title="Gustos" icon="icon ion-heart">
      <content has-header="true" has-tabs="true" padding="true">
        <h3>About this app</h3>
        <p>
          This is a sample seed project for the Ionic Framework. Please change it to match your needs.
        </p>
      </content>
    </tab>

  </tabs>

I triyed remove tabs and it works. But I need the side menu only in one tab. Any ideas?


#2

I have the same problem. My right side menu doesn’t work properly if there is a tab bar inside. Maybe we should add it in the issues.