Since I'm a little weak with Javascript and still learning Angular.
I'm having trouble trying to combine a couple of UI's, not all at once of course.
Let me explain what I'm trying to do.
I have a sidemenu and I want to add a swipe card page when I tap on the swipe page in my menu. See my image below.
Having problem wrapping my head around how Angular does things, so any pointers & tips would be appreciative.
Is this what you are looking for?
http://codepen.io/andrewmcgivery/pen/bqEeI
Basically, to mix the two together, the ion-pane that contains the page of the swipe cards has to be in an ion-view.
<ion-view title="Welcome">
<ion-pane ng-controller="CardsCtrl">
<swipe-cards on-card-swipe="onSwipe($event)">
<swipe-cards>
<swipe-card on-card-swipe="cardSwiped()" id="start-card">
Swipe down for a new card
</swipe-card>
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button class="button button-clear button-positive" ng-click="goAway()">Answer</button>
<button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</ion-pane>
Related
I am new to ionic. I have encountered following two directives :-
ion-header-bar and ionic-header-bar
I am confused regarding, when each of these directives are used ? I have tried playing with them
<ion-header-bar class="bar-balanced bar-subheader">
<button class="button button-icon icon ion-chevron-left"></button>
<h2 class="title">Sub Header</h2>
</ion-header-bar>
It shows the following UI :-
But, when I try
<ionic-header-bar class=" bar-balanced bar-subheader">
<button class="button button-icon icon ion-chevron-left"></button>
<h2 class="title">Sub Header</h2>
</ionic-header-bar>
UI changes to following :-
So, what's the use of ionic-header-bar directive ?
Thanks in advance.
According to the ionic framework docs there is no ionic-header-bar directive. In that way there is no use of it as an ionic UI element. It results in a plane HTML element. All ionic directives starts with an ion- element tag.
<ion-header-bar class="bar-balanced bar-subheader"></ion-header-bar>
where you have seen that:
<ionic-header-bar class=" bar-balanced bar-subheader">
</ionic-header-bar>
I think it does not exist and the correct code is:
<ion-header-bar class="bar-balanced bar-subheader">
</ion-header-bar>
(I Agree with lin)
I have an application that work in LTR or RTL mode, and im trying to update the menu to reflect the direction, so this is what i did:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="{{ (is_rtl) ? 'right' : 'left' }}">
<button menu-toggle="{{ (is_rtl) ? 'right' : 'left' }}" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
</ion-content>
</ion-view>
And the is_rtl is the variable set in the controller to know the direction. The problem is this does not have any effect. It appears that ionic does not parse the variable in the side part. Entering right or left manually works fine, but doesnt look it can work dynamically like. I even tried ng-if with no luck:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="left" ng-if="!is_rtl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="is_rtl">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
How can I solve this?
Thanks.
Update 1
I noticed The second try using ng-if partially works, but only if i navigated to a screen and returned back to the home screen, it does not work on initial load.
Just a quick note, the ion-nav-buttons directive must be the first descendant of the ion-view for it to work. From the docs:
Note that ion-nav-buttons must be immediate descendants of the
ion-view or ion-nav-bar element (basically, don’t wrap it in another
div).
It looks from the source code the side attribute is not being interpolated so no matter what you do, it'll always resolve to the html you pass. This is the snippet from their compile function
var side = 'left';
if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
side = tAttrs.side.toLowerCase();
}
Meaning that tAttrs.side will equal to "{{is_rtl}}" and not the actual boolean value.
Also it looks like ng-[if|show] will not work here because the lifecycle of the directive is being handled by the $ionNavBarController on init.
In short it looks like your feature with ion-nav-button isn't possible at the moment. However you might be able to pull it off by setting the nav-bar hidden with <ion-view hide-nav-bar="true"> and then set your controls in a custom ion-header-bar like this:
<ion-header-bar>
<div class="buttons" ng-class="{'buttons-right': is_rtl}">
<span ng-class="{'right-buttons': is_rtl}">
<button class="button button-clear">
Right button block
</button>
</span>
</div>
</ion-header-bar>
I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.
I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.
So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?
EDIT
So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.
Here is a copy of my view:
<ion-view title="My Title">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()">
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;">
<div class="button-bar">
<button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">Save</button>
<button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">Load</button>
<button class="button icon-left ion-ios7-play-outline" ng-click="play()">Play</button>
</div>
</ion-footer-bar>
</ion-view>
So, adding the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.
<ion-view hide-nav-bar="true"></ion-view>
However, it doesn't look like you can do this dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view>
...doesn't work. I'd welcome any thoughts on how to make it dynamic.
*I already answered the question about removing the footer bar in the edit
I am using PDFMAKE to create a base64 encoded pdf and I tried to show it with the Iframe by giving the encoded base64 to iframe src. It works on PC but it didn't work on the mobile ( android and ios ).
So, finally I stumbled upon Angularjs-PDF to show the pdf. Now, I am able see the pdf in mobile. But when I try to give custom width and height respective to device it takes. But the problem arises when I use zoom functionality, the page gets zoomed but it goes out of the screen. I can not even slide or swipe to see the content outside of the screen.
I want to make a pdf on the client side and preview to user with zoom functionality in Ionic.
If anybody got any solution for this please share, Thank You.
So for our company app we used angular-pdf Viewer:
Here is the template for the pdf viewer template, putting inside a ion-scroll allows for pinch zoom and it works great.
<div ng-show="notLoaded" class=" center bar bar-subheader">
<h1 class="title">Loading PDF...</h1>
</div>
<div class="tabs tabs-icon-left">
<a class="tab-item" ng-click="goPrevious()">
<i class="icon ion-arrow-left-c"></i>
Prev
</a>
<a class="tab-item" ng-click="goNext()">
<i class="icon ion-arrow-right-c"></i>
Next
</a>
</div>
<ion-scroll zooming="true" direction="xy" class="has-header">
<canvas class="padding" id="pdf" class="rotate0"></canvas>
</ion-scroll>
then on the page that shows the pdf:
<ion-view>
<div class="bar bar-header bar-positive">
<button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
</div>
<div class="has-header">
<ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675">
</ng-pdf>
</div>
</ion-view>
You feed the template to the pdf viewer and it will show up on the page.
To use it first include the right js files:
<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>
then inject pdf:
var app = angular.module('App', ['pdf']);
you can read more about it here, but using it in combination with ion-scroll it works just like you think it should on a native device:
https://github.com/winkerVSbecks/angular-pdf-viewer
I use ionic pet template.
I have a question about pet-detail page, if I would like to have a dynamic title on header, it will not show anything until I reload the page (using web browser), but I think it doesn't make sense since I would like to make an app.
Does I miss anything? what can I do?
here is my code as below:
<ion-nav-bar class="bar-positive">
<div class="buttons" ng-controller="BackCtrl">
<a class="button button-icon icon ion-chevron-left" ng-click="$back()"></a>
</div>
<h1 class="title"> {{ current_pet.name }} </h1>
..
If you happen to be using ion-view, use this:
<ion-nav-title>
{{ PageTitle }}
</ion-nav-title>
And put it outside your ion-content.
In my app I've used this:
<ion-view title="{{Properties.Title}}">
Where Properties is a object on my scope(I have sort of a master controller) where I "override" on each "inner controller".
If you are using and you want to show a button in the header bar only when an input/textarea is filled (not empty), then you can do the following.
<ion-header-bar class="bar-light">
<h1 class="title">{{$root.Title}}</h1>
<div class="buttons">
<button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
</div>
</ion-header-bar>
and inside "ion-content" -
<div class="row>
<textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>
Otherwise just using ng-if="Title" in the header bar will not work.