Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Having trouble? Ask for help.

Getting Started with Mobiscroll for AngularJS

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

For getting started with Mobiscroll for Ionic 1 please follow this guide.

What is Angular JS?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Learn more

What is the Mobiscroll Integration plugin and when to use it?

The Mobiscroll AngularJS Integration plugin is a set of Angularjs modules, which helps you using Mobiscroll with the Angularjs framework by providing directives that you can use out of the box.

Getting started with The Mobiscroll Angular integration

Here is an example of how to use the plugin in a common scenario

1. Download the plugin

When building your package select the AngularJS plugin on the download page. (don't forget to include the angular.js on your page header!)

2. Load the necessary scripts

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/mobiscroll.mobiscroll.angularjs.min.js"></script>

3. Declare your module

When using the Mobiscroll Integrational plugin in your module, you have to set up the dependencies. If you are using the datetime scroller, then the dependency will be the 'mobiscroll-datetime' module.

var myModule = angular.module('myApp', ['mobiscroll-datetime']);

4. Add behavior to the module

Lets say you want to calculate someones age by entering his birthday (for this example our app is going to do this). We want to use the date scroller to input someones birthday, and then use a function of the scope to calculate his age.

myModule.controller('myController', ['$scope', function ($scope) { // create controller for the module
    // create function which calculates the age given the birthday as a datetime object
    $scope.age = function() {
        if (!$scope.birthday || $scope.birthday > new Date()) // if the birthday is not defined yet return 'undefined'
            return 'undefined';
        var now = new Date();
        return Math.round((now - $scope.birthday) / (100 * 60 * 60 * 24 * 365)) / 10; // calculate the age in years with one decimal
    };
}]);

5. Add markup

For our age calculator to work we will need an input field for the birthday and the paragraph which will tell us the information.

The angular model directive will take care of the model, and the mobiscroll date directive will take care of the rest.

<div ng-controller="myController">
    <input type="text" ng-model="birthday" mobiscroll-date />
    <p>Your age is {{age()}} years.</p>
</div>

And we're done! Whenever you click on the input the mobiscroll will pop up and ask for the birthday. When the birthday is set angular will evaluate the expression inside the {{ }} braces and the correct age will be shown. It's easy, isn't it?

Using module loaders

Mobiscroll can be loaded as a module as well. It implements the Universal Module Definition (UMD) pattern, meaning that it can be used with module loaders supporting the Asynchronous Module Definition (AMD) (e.g. RequireJS, Webpack, SystemJS) or CommonJS (e.g. Browserify, Webpack, SystemJS) syntax.

To load Mobiscroll as a module, download the mobiscroll package and use it as you would use any other module:

var angular = require('angular');
var mobiscroll = require('path/to/mobiscroll/js/mobiscroll.angularjs.min');

angular
    .module('myApp', ['mobiscroll-datetime'])
    .controller('myController', ['$scope', function ($scope) {

    }]);

Mobiscroll Directives Reference

Here will be listed the directives that come with the Angular JS integration plugin, with a few examples on how to use them.

Note: Currently all of the directives are restricted to attributes, since most of the mobiscroll components need an input or select tag to be initialized on.

Common attributes

Every scroller can be tuned to your needs, by the initialization options. When using angular you can use the same initialization as you would use in plain javascript, only you have to pass it via the mobiscroll controls attribute that you are using.

// you would do it like this in jQuery for date
$('input').mobiscroll().date({
    display: 'bubble',
    mode: 'mixed',
    theme: 'ios'
});

// you would do it like this in angular
<input type="text" ng-model="birthday" mobiscroll-date="{ display: 'bubble', mode: 'mixed', theme: 'ios' }" />

Calling instance methods

Gives access to the mobiscroll instance without querying the element.

When added to the element a mobiscroll is initialized on, sets the initialized mobiscroll instance into the current scope property provided.

Example showing mobiscroll on button click

<div ng-controller="myController">
    <input id="birth" ng-model="birthday" mobiscroll-datetime mobiscroll-instance="birthdayInstance" type="text"/>
    <button ng-click="showTheScroller()">Show<button/>
</div>

This way you can access the mobiscroll datetime instance inside myController

// ... 
.controller('myController', ['$scope', function ($scope) {
    $scope.showTheScroller = function () {
        $scope.birthdayInstance.show(); // calling the instance show method
    };
}]);

Global Settings

mobiscroll.settings

Description

The global mobiscroll object is the place where you can set all the options that you'll be needing across your application or page. It should contain the settings that need to be the same across all components.

// Sets the theme to iOS and localization to German
mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};

For more examples check out the demo page.