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.
Related
I created a multi-button screen much like this:
When I click on a button it would have an id and that id I get on its route, I did with list already, but several buttons passing parameter I still can not.
My question is how to pass that button id to another screen.
Avisos.html
<ion-view view-title="Avisos">
<ion-content style="background-color: #FF4500; background-size: cover;
background-position: center;">
<div class="row icon-row">
<div class="col text-center">
<button class="botao button button-positive" id="1">Icon</button>
<br>mais informaçoes
</div>
<div class="col text-center">
<button class="botao button button-positive" id="2">Icon</button>
<br>Avisos
</div>
<div class="col text-center ">
<button class="botao button button-positive" id="3">Icon</button>
<br>Contato
</div>
</div>
</ion-content>
</ion-view>
In that part is where I get the id, How can I get in that part the id of the chosen button? And pass it on side.id?
site.html
<ion-view view-title="Site">
<ion-content>
<ion-list>
<ion-item ng-repeat="site in sites" href="#/app/conteudoDoSite/{{site.id}}">
<span ng-bind-html="site.title"></span><span class="badge badge-assertive">{{site.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How to pass parameter to another screen with ionic1 and angular1? Can anybody help me? What I am trying to do is that when the user clicks one of these buttons the id is passed.
I would recommend using ui-sref instead of href in this situation as it allows you to use states instead of paths and also allows you to pass variables to the next view. Here is an example:
<ion-item ng-repeat="site in sites" href="app.conteudoDoSite({id: site.id})">
You also need to make sure that the state you are trying to pass the variable to is configured to receive parameters. Which would look something like this:
.state('app.conteudoDoSite', {
url: '/conteudoDoSite/:id',
templateUrl: '/* Fill in */',
controller: '/* Fill in */'
})
I attempted to guess the state by looking at your code, but please make sure that it is correct, before copying the examples.
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 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
Hello I am trying to Customize Ionic Header. Code is shown below:
<ion-header-bar>
<div class="buttons">
</div>
<h1 class="title">{{title}}</h1>
<div class="buttons">
<span class="icons_all store">
<img src="img/assets/location.png">
</span>
</div>
</ion-header-bar>
Problem is when i try to redirect page to new page . Back button for above header which is also called on other pages , doesn't show .
Any help ?
You need to add
<ion-nav-back-button>
</ion-nav-back-button>
As per the document http://ionicframework.com/docs/api/directive/ionNavBackButton/
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>