ionic modal window
$ IonicModal
$ IonicModal can cover the main contents of the box user interface.
You can embed the following code (inside the code according to your own business scenarios corresponding changes) in your index file or other file.
<script id="my-modal" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script>
Then you can in your Controller inside inject $ ionicModal. Then call you just write a template, initializes. As in the following code:
angular.module('testApp', ['ionic']) .controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal', { 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're done 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)
parameter | Types of | Detail |
---|---|---|
templateString | 字符串 | String template as the content modal window. |
options | 对象 | options passed to ionicModal # initialize method. |
Returns: an object, an instance of ionicModal controller.
fromTemplateUrl(templateUrl, options)
parameter | Types of | Detail |
---|---|---|
templateUrl | 字符串 | Loading url template. |
options | 对象 | Passing objects by ionicModal # initialize method. |
Returns: promise object.Promises object is a specification CommonJS Working Group, it aims to provide a unified interface to asynchronous programming.
ionicModal
The $ ionicModal services instantiate.
Tip: When you complete each module clear, be sure to call remove () method to avoid memory leaks.
NOTE: a module from its initial range of broadcasting the 'modal.shown' and 'modal.hidden', to be passed as a parameter itself.
method
initialize(可选)
Create a new modal window controller example.
parameter | Types of | Detail |
---|---|---|
options | 对象 | Click one of the options object has properties:
|
show()
Modal window instance
- Return Value:
promise
Promise objects, after the completion of the animation are resolved in a modal window
hide()
Hide modal window.
- Return Value:
promise
Promise objects, after the completion of the animation are resolved in a modal window
remove()
Remove modal window instance from the DOM and clean.
- Return Value:
promise
Promise objects, after the completion of the animation are resolved in a modal window
isShown()
- Returns: Boolean value used to determine modal window is displayed.
Examples
HTML code
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>本教程(w3write.com)</title> <link href="http://www.w3write.com/static/ionic/css/ionic.min.css" rel="stylesheet"> <script src="http://www.w3write.com/static/ionic/js/ionic.bundle.min.js"></script> </head> <body ng-controller="AppCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Contacts</h1> <div class="buttons"> <button class="button button-icon ion-compose" ng-click="modal.show()"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="contact in contacts"> {{contact.name}} </ion-item> </ion-list> </ion-content> <script id="templates/modal" type="text/ng-template"> <ion-modal-view> <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title">New Contact</h1> <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button> </ion-header-bar> <ion-content class="padding"> <div class="list"> <label class="item item-input"> <span class="input-label">First Name</span> <input ng-model="newUser.firstName" type="text"> </label> <label class="item item-input"> <span class="input-label">Last Name</span> <input ng-model="newUser.lastName" type="text"> </label> <label class="item item-input"> <span class="input-label">Email</span> <input ng-model="newUser.email" type="text"> </label> <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button> </div> </ion-content> </ion-modal-view> </script> </body> </html>
CSS code
body { cursor: url('/en/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 the Headcrab' }, ]; $ionicModal.fromTemplateUrl('templates/modal', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); $scope.createContact = function(u) { $scope.contacts.push({ name: u.firstName + ' ' + u.lastName }); $scope.modal.hide(); }; });