i have a view in templates as
<ion-header-bar class="bar-assertive" title="Home"></ion-header-bar>
<ion-view view-title="Home">
<ion-content class="grey-bg">
<div class="list card">
<a ng-click="click();"> <div class="" > <i class="ion-ios-camera cicon"></i> </div></a>
....</ion-content></ion-view>
and inside the controller i have a function
$scope.click = function(){
$state.go('app.click',{},{reload:true});}
the page navigate properly but the trouble is that when i test it in my browser the contents in the header disappear when i try the back button and it reappears when i refresh that page. Can anyone point out what i am missing here.
Thanks in advance.
Related
I'm using ionic framework to develop an app.
I have an abstract state, with some html as "header" and an ion-nav-view. This is the template:
<div class="list">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
</div>
</div>
<ion-nav-view name="lesson-content"></ion-nav-view>
It works fine, but the div with list class it's fixed on the top, I want it to scroll together with the content of ion-nav-view.
If I try to wrap them on ion-content, the content of ion-nav-view gets cropped.
Any ideas? Thank you guys!
You need to remove the header from the index.html and add a custom header inside the ion-view. Works for me
I got a header bar outside of ng-repeat:
<ion-header-bar class="headerView" ng-show="!hideAll">
<button id="shareImage" class="button button-icon icon ion-share" style="color:#fff" ng-click="shareImageTo({{originalImageSource}})"></button>
<button class="button button-outline button-light close-btn" ng-click="closeModal()">{{::actionLabel}}</button>
</ion-header-bar>
And a slidebox where images are shown:
<ion-slide ng-repeat="single in slides track by $index">
<div class="item item-image gallery-slide-view">
<img ng-src="{{single.original}}">
<input type="text" ng-model="originalImageSource" value="{{single.original}}">
</div>
</ion-slide>
{{single.original}} is an URL to an image. But this URL is not placed in the input field. It is shown when I´m deleting this ng-model statement.
If a user clicks the button #shareImage the ShareImageTo(URL) function is executed. But with an undefined value for {{originalImageSource}}.
Any thoughts on how i could pass the URL in {{single.original}} to this ShareImageTo() function?
With $ionicSlideBoxDelegate you can get the current slide index via currentIndex(). That enables you to get the URL by $scope.slides[$ionicSlideBoxDelegate.currentIndex()].original in your ShareImageTo()-method like that:
$scope.ShareImageTo = function() {
var URL = $scope.slides[$ionicSlideBoxDelegate.currentIndex()].original;
//your logic
};
Another approach would be to use ion-slide-box's directive on-slide-changed.
Template:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
...
</ion-slide-box>
Controller:
$scope.slideHasChanged = function(index) {
$scope.originalImageSource = $scope.slides[index].original;
//.. some more logic
}
Just create a div that wrap around both your navbar and your slidebox, and place your ng-repeat in that div :)
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/
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.