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
Related
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
I have created a cordova ionic app with side menu. By default, I need to keep side menu open. When I click on a button on page, it doesn't work. I have click twice on the page. First time when i click on button, side menu closes, then i have to click on button again to perform the operation. How can i make it work even if the side menu is open.
SideMenu.html
<ion-side-menus enable-menu-with-back-views="false" class="menu-page">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left" >
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="left-nav">
<ion-content scroll="false" has-bouncing="false">
<div class="user-info text-center">
</div>
<ion-list>
<a class="item item-icon-left" menu-close ui-sref="app.menuscreen" ui-sref-active="selected">
<i class="ion-home"></i><span>Home</span>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sidemenu.html',
})
.state('app.menuscreen', {
url: '/menuscreen',
views: {
'menuContent': {
templateUrl: 'templates/menuscreen.html',
}
}
})
MenuScreen.html
<ion-view>
<ion-content has-bouncing="false">
<div class="button-box">
<h2>Would you like to?</h2>
<!--Button-->
<div class="btn-box">
<div class="btn-parent-box">
<div class="icon">
<i class="ion-ios-plus-outline"></i>
</div>
<button class="button button-full btn-orange" type="submit"
ui-sref="newjob" title="New Job">New Job</button>
<div class="clearfix"></div>
</div>
</div>
<!--/button-->
</div>
</ion-content>
</ion-view>
Instead of using menu-close better to user menu-toggle="left" / menu-toggle="right" based on your menu have and you can use that button event for some code. What all you have to do is,
<button class="button button-full btn-orange" type="submit" menu-toggle="left" ui-sref="newjob" title="New Job">New Job</button>
in the menu, what ever so called list is add
menu-toggle="left".
that's it. And you can able to perform all operation.
If correct vote for it.
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>
I am currently working on $ionicScrollDelegate in my mobile app. My objectives is when the user click the header bar, it will scroll to top automatically.The problem I have right now is when I include the ion-side-menu in my code, the $ionicScrollDelegate cannot scroll back, I created a button which it returns their position, but cannot scroll back. I am trying to figure out why $ionicScrollDelegate cannot scroll back to top when I included the side menu but when I removed the side menu, the $ionicScrollDelegate seems to work fine and it can scroll back to top.
Working code - without ion-side-menu
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Details </h1>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
<ion-view>
Not working - With side menu
<ion-view>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Expenses Details</h1>
<a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ul class="list">
<a ui-sref="tabs.home" class="item">Home</a>
<a ui-sref="about" class="item">About</a>
<a ui-sref="tabs.setting" class="item">Settings</a>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
In My controller, I have
$scope.scrollListToTop = function () {
var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
alert('Result:' + result.top + " " + result.left);
//$ionicScrollDelegate._instances[2].scrollTop();
}
It may be related to your markup structure.
Both the links below suggest that ion-side-menu-content should contain an ion-nav-bar then an ion-nav-view
https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html and http://mcgivery.com/understanding-ionics-side-menu/
Switching that around and putting your ion-content in there may give you back control.
Drop us a codepen or similar if not.
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>