Ionic V1 Side Menu Content strange behaviour - angularjs

I am Working on a Ionic 1 project which have two language Arabic which is RTL and English which is LTR.
I added two menus to handle this, one with side="right" for Arabic and the other one with side="left" for English
Every thing is working fine at start but when I change the language the side menu content is draggable to the left and right !!
It should be draggable only to left only when then left menu is displayed and to right only when the right menu is displayed
Trials
I tried with drag-content='false' [disable both directions].
I trired to add event Listener on ionic-side-menus-content on drag to check if direction is left so I could preventDefault and return false; [didn't worked]
here is screenshot of the issue.
Accepted Direction
Wrong behaviour
app.html code
<ion-side-menus enable-menu-with-back-views="false">
<!-- Left menu -->
<ion-side-menu side="left" ng-if="$root.lang=='en'">
<div ng-include="'tpls/side-menu.html'"></div>
</ion-side-menu>
<ion-side-menu side="right" ng-if="$root.lang=='ar'">
<div ng-include="'tpls/side-menu.html'"></div>
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
<ion-nav-bar align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="{{$root.lang=='ar'?'right':'left'}}">
<button class="button button-icon button-clear ion-navicon" menu-toggle="{{$root.lang=='ar'?'right':'left'}}">
</button>
</ion-nav-buttons>
<div class="bar bar-subheader">
<div class="searchBox primaryColor-bg">
<div class="ionicons">
<i class="ion-camera"></i>
<span>|</span>
<i class="ion-search"></i>
</div>
<input type="text" name="" placeholder="{{'TITLES.SEARCH_PLACEHOLDER'|translate}}" value="">
</div>
</div>
</ion-nav-bar>
<ion-nav-view name="menuContent" >
</ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Any help will be appreciated

Related

Sidemenus in ionic framework

This is my file in angularjs. I am not able to insert the code for sidemenus. If I include that code, the style of ion-nav-view changes and the page is blank. Pls help me to get to know the exact place I should insert the menu.
<ion-nav-view class="dashboard_pane">
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
<div class="bar bar-footer bar-light" style='background-image:url(../img/advertisement_button.png);background-size:cover;width:100%;height:8%;'></div>
</body>
Is the header section fine ?
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
</ion-nav-bar>
To create side menus in ionic, you have to use <ion-side-menus> directive as parent directive. Inside that you have use 2 directive (3 directives if you are using both right and left menu):
One for main body content <ion-side-menu-content> Main body or <ion-nav-view> will go here. Another for left/right menu : <ion-side-menu side="left">
Example Code:
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios">
<!-- Main body content will go here -->
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<div ng-include src="'templates/left-menu.html'"></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios" class="dashboard_pane">
<!-- Main body content will go here -->
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<!--<div ng-include src="'menu.html'"></div> -->
**<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>**
</ion-content>
</ion-side-menu>
</ion-side-menus>

AngularJS ng-show - 2 Times, 2 different results

I am creating an app with angularjs, cordova and iconic.
I have a trash icon which should be show only when the user is at the main page.
So i will show the icon only wenn the rootScope.Trashicon is true.
It works fine in my sidemenu. But in the side-menu-content area it doesnt work. I dont know why...
<ion-side-menus ng-controller="MainController" ng-init="getListTitle()">
<ion-side-menu side = "left"> <!-- expose-aside-when DELETE IT !!!!!! -->
<header><img src="img/todo_today_logo_small.png"></header>
<div id="sideContent" class="item item-divider">ToDo Liste:
<p>
> <a menu-close href="#/todo">{{sideMenuListTitle}}</a>
</p>
<div ng-show="Trashicon">test</div>
<h3></h3>
</div>
<div>
<ul>
<li><a menu-close href="#/impressum">Impressum</a></li>
<li><a menu-close href="#/datenschutzerklaerung">Datenschutzerklärung</a></li>
</ul>
</div>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="custom-dark" align-title="center">
<ion-nav-buttons side="left">
<!-- Toggle left side menu -->
<button menu-toggle="left" class="button button-icon icon ion-navicon light"></button>
</ion-nav-buttons>
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
<ion-nav-title></ion-nav-title>
</ion-nav-bar>
<div ng-view="" class="container"></div>
</ion-side-menu-content>
</ion-side-menus>
This is my rootScope Variable
.controller('MainController', function ($scope, $ionicPopup, $rootScope) {
$rootScope.Trashicon = false;
The div with the trash icon is still visible.. and i dont know why... it would be great if someone has an idea for me.
It seams the element ion-nav-buttons has its own styling which overrides all elements above it.
If you move the ng-show closer the button you will have better control.
i.e instead of
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
do this
<div>
<ion-nav-buttons side="right">
<button ng-show="Trashicon" ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
If i try ng-show="1==2" it will work only in the side menu too....
and not in the side menu content area.. the div will show if ng-show="1==2"... strange

How to move map when sidebar is open?

I am trying to develop an ionic application like screenshot which I put here.
But there is something that I want to know about google map, or whatever the answer is it.
as you see, I opened the sidebar.the thing that I want to do is moving the map during this situation.
is it posible ? thanks in advance..
this is my map.html page.
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-pinpoint" ng-click="goster()"></button>
</ion-nav-buttons>
<ion-content>
<div class="mapWrap" data-tap-disabled="true">
<ng-map center="{{konum.lat}},{{konum.lon}}"
on-click="hideInfo()"
disable-default-u-i="true"
zoom="15">
</div>
</ion-content>
here is my menu.html page.
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7">
<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="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content >
</ion-content>
</ion-side-menu>
</ion-side-menus>

Ionic custom header(ion-nav-bar) hides issue

I want to have in my app the same header(with Back button and other custom buttons) on each page.
I tried to define a custom ion-nav-bar in index.html as following:
<html>
...
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body> </html>
and all the other pages looks like this:
<ion-view view-title="PageN">
<ion-content>
<ion-list>
<ion-item ng-repeat="article in articles" href="#/app/articles/{{article.id}}">
{{article.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
After I launched the application, my custom navbar is hidden. I can see only default navbar.
How to customize the default navbar or how to replace it with a custom one?
I already tried some solutions including header but without success.
Anyone?

ng-include with ion-nav-bar not displaying

I'm running into an issue with using ng-include in ion-nav-bar. The ng-include(d) ion-nav-bar code isn't displaying (it is included though).
The code is as follows:
<ion-view title="test">
<ng-include src="'partials/header-list.html'"></ng-include>
<ion-content padding="false">Test</ion-content>
<ng-include src="'partials/footer-badges.html'"></ng-include>
</ion-view>
The contents of partials/header-list.html is:
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button button-clear ion-chevron-left"> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right"> Home </ion-nav-buttons>
This is rendered into:
<ng-include src="'partials/header-list.html'" class=""><ion-nav-bar class="bar-positive bar bar-header nav-bar nav-title-slide-ios disable-user-behavior invisible">
<ion-nav-back-button class="button button-clear back-button ng-hide"> Back </ion-nav-back-button>
<div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding"></h1>
<div class="buttons right-buttons"> <span class=""> Home </span></div></ion-nav-bar>
<ion-nav-buttons side="right" style="display: none;"></ion-nav-buttons></ng-include>
I can see that ion-nav-bar is set to class=invisible and ion-navs-buttons is set to display:none.
Why is this happening and what can I do to get the nav bar to display when used in ng-include?
Thanks
Meint
As requested by ArtOfCode please find the full code below. The approach I've taken also correlates with the advice of the Ionic team given in the "Navigating Ionic's Headers" formula.
I'm using <ion-nav-bar> for the generic navigation and apply exceptions to that navigation via a specific <ion-header-bar>. An example of this approach:
<ion-view hide-nav-bar="true">
<ion-header-bar align-title="center" class="bar-dark">
<div class="buttons">
<a class="button button-icon icon ion-chevron-left" ng-href="#/app/group"> Back</a>
</div>
<h1 class="title"></h1>
<div class="buttons">
<a class="button button-icon icon ionic-plus" ng-href="#/app/member-create/{{groupid}}"></a>
<a class="button button-icon icon ionic-minus" ng-href="#/app/member-delete"></a>
</div>
</ion-header-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
As an additional remark I would like to add that I have found that angular directives provide a much better approach for reusability than using ng-include as originally envisioned by myself. All part of the leaning experience :-)
I dont think you want the inner single quotes in your src attribute
<ng-include src="partials/header-list.html" class="">...
I've stumbled upon the same problem. Beta14 should somehow alleviate the issue with new ways to override the navbar. Until then, I'm using:
<ion-view hide-nav-bar="true">
and using an <ion-header-bar> instead, which can be included without problems. Note it should be used for non-standard views.
An example:
<ion-view hide-nav-bar="true>
<ion-header-bar class="bar-positive">
<h1 class='title'>
Hello!
</h1>
</ion-header-bar>
<ion-content class="has-header">
Content
</ion-content>
</ion-view>

Resources