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?