I have a basic slider in Ionic 2
<ion-slides>
<ion-slide>
<h1>Slide 1</h1>
<button (click)="doAction()">Click me</button>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
And in my ts file
doAction() {
console.log("clicked");
}
Clicking the button does nothing. If I place the button anywhere outside the slider it works fine. Is the slider capturing the click event somehow?
If you inspect your button , you will see (.button-inner).
So, changing it to outer it would make it work fine.
Related
this works but it can't scroll down to the very bottom. I have home button at the bottom and and few items are blocked by it and won't scroll up. home button is in footer in the main page and not on the same controller. how do I make sure I see all picture at the bottom. appreciated for any advice.
<ion-scroll direction='y' zooming='true' style="height: 1024px">
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL</p>
</a>
</div>
</ion-scroll>
I think the better way is use <ion-content>, this was designed for scrolling as well. But it has some class that help us detect the bottom and top margin like has-footer or has-sub-footer. This won't need to specify an exact height value by style attribute too.
For <ion-content> you can do like this:
<ion-content direction="y" class="has-footer" <!-- has-bouncing="true" --> >
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL"</p>
</a>
</div>
</ion-content>
Like the example above, I added has-footer class, it will automatically push the main content up for you, all the content will be shown as you expected. You can also put the has-bouncing="true" attribute like <ion-scroll>
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 want to load the data as soon as I slide. I am using ionic-slidebox like,
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="1" show-pager="false">
<ion-slide disable-scroll="false">
<ion-scroll>
<div> loading some data</div>
</ion-scroll>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
</ion-content>
on-slide-changed I am calling slide Has Changed()function and doing state.go() I am getting the slider effect but because of the empty slide in code I am getting the empty slide
I have to load the data in the empty slide. I have tried by placing the ng-controller and loading the template in the empty slide
I am working on an Ionic app, and want to have a slider box, with each slide representing an ion-view.
Slide Box -
<ion-view>
<ion-content>
<div class="row">
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Route
.state('parent.view-1', {
url: "/view1",
views: {
"view-1": {
templateUrl: "app/parent/view-1.html"
}
}
})
One of the views - view-1.html -
<ion-view>
<ion-content>
<h1>View 1</h1>
</ion-content>
</ion-view>
The issue is that view-1 is not displaying inside the first slide. Can anyone tell what can be the issue here? Also, Is this the correct way to display slidable views? Please suggest. I am a beginner in Ionic.
I'm working on a similar set up, and I found that his doesn't work very neatly.
Since your ion slide box is inside ion-view tags, I'm assuming that this template is being injected into a somewhere in a higher level?
Try to inject instead:
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
inside your without and other stuff wrapping it.
I am using the ionic framework.
I have multiple slide boxes being generated by ng-repeat. For each slide box I wanted to have a section that will appear underneath when the button in the ion-slide is clicked. The code below explains what am I trying to do and what does and does not work. Any help would be greatly appreciated!
<ion-slide-box show-pager="false">
<ion-slide>
TEST111111111111
</ion-slide>
<ion-slide>
TEST222222222222
</ion-slide>
<ion-slide>
TEST333333333333
<button class="button button-dark" ng-click="test = !test">
Test
</button>
Works > True or False? > {{test}}
</ion-slide>
</ion-slide-box>
Does not work > True or False? > {{test}}
You need to use a variable with a . (dot). See Understanding Scopes in AngularJs
<ion-slide-box show-pager="false">
<ion-slide>
TEST111111111111
</ion-slide>
<ion-slide>
TEST222222222222
</ion-slide>
<ion-slide>
TEST333333333333
<button class="button button-dark" ng-click="someObject.test = !someObject.test">
Test
</button>
Works > True or False? > {{someObject.test}}
</ion-slide>
</ion-slide-box>
Does not work > True or False? > {{someObject.test}}
And make sure that in your controller you also initialize a value for someObject
$scope.someObject = {
test: false
};