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.
Related
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
I am using ionic Framework version 1 .When i use the ion-slide-box
auto play="true" that auto speed little bit speed .
1.How i reduce that speed?
2.Possible to reduce that next slider Timing?
3.How to i reduce that speed?
I would not suggest using ion-slide-box, since it is deprecated and will be removed.
Deprecated API
will be removed in the next Ionic release in favor of the new
ion-slides component. Don't depend on the internal behavior of this
widget - source.
Instead use the new ion-slides based on Swiper API. This API offers a lot more flexibility with slides (see Swiper Parameters section in link). For instance you can reduce the speed of a transition and even auto-play speed of certain slides.
Auto Play
Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
If you need to specify different delay for specific slides you can do
it by using data-swiper-autoplay (in ms) attribute on slide:
<div class="swiper-slide" data-swiper-autoplay="2000">
Basic example using new slides:
HTML
<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide-page>
</ion-slides>
</ion-content>
Controller
$scope.options = {
loop: false,
effect: 'fade',
speed: 500,
}
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
// note: the indexes are 0-based
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
Full Codepen Example here.
You need to use slide-interval properties of ion-slide-box.
For example :
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval="1000">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
Fore more properties read here.
Hopes this will help you !!
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
Here is codepen example. When I click on Scientific Facts button, it is directed to the facts page.
In facts page, I have to manually type view-title="facts", so the header can show title "facts".
Is it possible to get the button text(Scientific Facts) automatically to be the view-title?
http://codepen.io/ionic/pen/odqCz
<html ng-app="ionicApp">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
#IonicFramework
</div>
<div class="item">
#DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
I'm not quite sure the motivation behind this request, but one possible way to solve it would be to add the desired title into the URL of the anchor that redirects to your "facts" page, i.e.:
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts?title=Scientific%20Facts">Scientific Facts</a>
If you alter your route to the page to be aware of that query param, you could use the $stateParams service within that page's controller to retrieve that value, i.e.:
.state('tabs.facts', {
url: "/facts?:title",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
Notice the url "/facts?:title" - the ":title" now becomes a parameter that will be picked up by the $stateParam service. Now within your controller you could just do this:
.controller('FactController', function ($scope, $stateParams) {
$scope.title = $stateParams.title;
});
Now you can reference that title right from your Facts view via {{title}}.
Here is an updated pen that shows this working.
http://codepen.io/anon/pen/OVMbVX
Seems like a lot of effort though, just to pass around the title ;-)
A better approach could be to create a "page names" service, which has all your page names in one place, and then grab that services from both controllers; on the home controller you could use the page name to setup the anchor text, and on the other page use it to setup the page title. Lots of ways to skin this cat.
There are two ways to achieve this:
1) The most obvious one is done with prototypal controller inheritance in angular. You need to declare a controller for the tabs state.
Within the $scope in this controller you can define the title for the button and the header as scope variable, e.x:
$scope.testTitle = 'Scientific Facts';
Now since every other controller inherits from the tabs controller, the testTitle property is also in the inherited scope and can be used to render the title.
Updated codepen: http://codepen.io/anon/pen/mJVOJJ
I would not recommend to do this this way since is hard to know which properties are defined in which controller and this will get very messy with the time.
2) You can declare a service and define the title property there. Than you can inject the service into controller to get the title property.
In this way you keep the $scope clean:
.factory('TitleService', function() {
var titles = {
t1:'foobar',
t3:'baz',
t4:'bar'
};
return titles;
});
Codepen: http://codepen.io/anon/pen/xGZRZM
I have an ionic modal window which serves as setting's menu
plan is to use the modal with a small header and inside the content use the ion-tabs directive in a simple manner that each click shows and hide's a div
I've read the docs saying that they have a bug related to using the tabs inside a ion-content, so im aware of it.
how then can i achieve this funcionallity, if i remove the ion-content than the tabs directive is being pushed down instead of showing on top of the screen, here is the markup for the modal:
<ion-modal-view>
<ion-header-bar style="background-color: #40863E">
<h1 class="title" style="color:white;">My Account</h1>
<div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>
<ion-content>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
</ion-tab>
<ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
<ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>
</ion-content>
</ion-modal-view>
*UPDATE
adding a picture to describe the problem
Try to use ion-pane instead of ion-content.
Remove the <ion-content> tag and then you can use CSS to push the top of the tabs down. ionContent is good about knowing when a header is used, but it does have some issues when ionTabs are inside. Something like the following, but you might need to use a more specific CSS selector.
.tabs { margin-top: 44px; }
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
};