The best ionic modal window Tutorial In 2024, In this tutorial you can learn $ IonicModal,ionicModal,Examples,
$ 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 }); });
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.
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.
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
promise
Promise objects, after the completion of the animation are resolved in a modal window hide()
Hide modal window.
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.
promise
Promise objects, after the completion of the animation are resolved in a modal window isShown()
<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>
body { cursor: url('/en/try/demo_source/finger.png'), auto; }
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(); }; });