Ionic JS Model $ionicModal can obscure the user main interface of the content box _javascript skills

Ionic model

$ionicModal

$ionicModal can obscure the content box of the user's main interface.

You can embed the following code in your index file or other file (the code in it can be changed according to your own business scenario).

<script id= "my-modal.html" type= "text/ng-template" >
<ion-modal-view>
<ion-header-bar>
 
 

Then you can inject $ionicModal inside your Controller. Then call the template you just wrote to initialize the operation. Just like the following code:

Angular.module (' testApp ', [' Ionic '])
. Controller (' Mycontroller ', function ($scope, $ionicModal) {
$ Ionicmodal.fromtemplateurl (' my-modal.html ', {
scope: $scope,
Animation: ' Slide-in-up '
}). Then ( function (modal) {
$scope. modal = modal;
});
$scope. Openmodal = function () {
$scope. modal.show ();
$scope. Closemodal = function () {
$scope. modal.hide ();
Cleanup the modal when we do with it!
$scope. $on (' $destroy ', function () {
$scope. Modal.remove ();
});
Execute action on Hide modal
$scope. $on (' Modal.hidden ', function () {
//Execute Action
});
Execute action on Remove modal
$scope. $on (' modal.removed ', function () {
//Execute Action
});

Method

Fromtemplate (templatestring, Options)

Parameters	type	Details
Templatestring	字符串	The string of the template as the content of the model.
Options	对象	The options are passed to the Ionicmodal#initialize method.

return: object, an instance of a Ionicmodal controller.

Fromtemplateurl (Templateurl, Options)

Parameters	type	Details
Templateurl	字符串	The URL to load the template.
Options	对象	Passing an object through the Ionicmodal#initialize method.

returns: Promise object. The promises object is a specification proposed by the COMMONJS workgroup to provide a unified interface for asynchronous programming.

Ionicmodal

Instantiated by the $ionicmodal service.

Tip: When you complete each module purge, be sure to call the Remove () method to avoid memory leaks.

Note: A module widely broadcasts ' Modal.shown ' and ' Modal.hidden ' from its initial range, passing itself as a parameter.

Method

Initialize (optional)

Create a new example of a model controller.

Parameters	type	Details
Options	对象	An option object has attributes: {object=}范围the scope of the subclass. Default: Creates a $rootscope subclass. {string=}动画animations with display or hidden. Default: ' Slide-in-up ' {boolean=}第一个输入框获取焦点whether the first INPUT element of the model automatically gets the focus when it is displayed. Default: False. {boolean=}Backdropclicktoclose ' closes the model when clicking on the background. Default: True.

Show ()

Show Model Instances

Return value: Promise Promise object, parsed after the model finishes animation

Hide ()

Hides the model.

Return value: Promise Promise object, parsed after the model finishes animation

Remove ()

Removes the model instance from the DOM and cleans it.

Return value: Promise Promise object, parsed after the model finishes animation

Isshown ()

Returns: A Boolean value used to determine whether the model is displayed.

Instance

HTML Code

CSS Code

Body {
Cursor:url (' http://www.runoob.com/try/demo_source/finger.png '), auto;
}

JavaScript Code

Angular.module (' Ionicapp ', [' Ionic '])
. Controller (' Appctrl ', function ($scope, $ionicModal) {
$ Scope.contacts = [
{name: ' Gordon Freeman '},
{name: ' Barney Calhoun '},
{name: ' Lamarr ' headcrab '},
   ];
$ionicModal. Fromtemplateurl (' templates/modal.html ', {
scope: $scope
}). Then (function (modal) {
$ Scope.modal = modal;
});
$scope. createcontact = function (u) { 
$scope. Contacts.push ({name:u.firstname + ' + u.lastname});
$scope. Modal.hide ();

Complete Source: