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 files (the code inside can be changed according to your own business scenario).
<script id="my-modal.html" type="text/ng-template"><ion-modal-view><ion-header-bar><h1>My Modal title</h1></ion-header-bar><ion-content>Hello!</ion-content></ion-modal-view></script>
Then you can inject $ionicModal into your Controller. Then call the template you just wrote to perform the initialization 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'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 | type | Details |
|---|---|---|
| templateString | 字符串 | The string of the template serves as the content of the model. |
| options | 对象 | options are passed to the ionicModal#initialize method. |
fromTemplateUrl(templateUrl, options)
| parameter | type | Details |
|---|---|---|
| templateUrl | 字符串 | Load the url of the template. |
| options | 对象 | Pass the object through the ionicModal#initialize method. |
Return: promise object. The Promises object is a specification proposed by the CommonJS working group, with the purpose of providing a unified interface for asynchronous programming.
ionicModal
Instantiated by $ionicModal service.
Tip: When you complete each module clearing, make sure to call the remove() method to avoid memory leaks.
Note: A module broadcasts 'modal.shown' and 'modal.hidden' from its initial range, passing itself as a parameter.
method
initialize (optional)
Create a new model controller example.
| parameter | type | Details |
|---|---|---|
| options | 对象 | An option object has the following properties:
|
show()
Display model instance
Return value: promise promise object, parsed after the model completes animation
hide()
Hide the model.
Return value: promise promise object, parsed after the model completes animation
remove()
Remove the model instance from the DOM and clean it.
Return value: promise promise object, parsed after the model completes animation
isShown()
Return: Boolean value, used to determine whether the model is displayed.
Example
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>Rookie Tutorial(runoob.com)</title><link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"><script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script></head><body ng-controller="AppCtrl"><ion-header-bar><h1>Contacts</h1><div><button 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.html" type="text/ng-template"><ion-modal-view><ion-header-bar><h1>New Contact</h1><button ng-click="modal.hide()">Cancel</button></ion-header-bar><ion-content><div><label><span>First Name</span><input ng-model="newUser.firstName" type="text"></label><label><span>Last Name</span><input ng-model="newUser.lastName" type="text"></label><label><span>Email</span><input ng-model="newUser.email" type="text"></label><button ng-click="createContact(newUser)">Create</button></div></ion-content></ion-modal-view></script></body></html>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 the 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 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></title><link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script><style>body {cursor: url('http://ionicframework.com/img/finger.png'), auto;}</style><script>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.html', {scope: $scope}).then(function(modal) {$scope.modal = modal;});$scope.createContact = function(u) { $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });$scope.modal.hide();};});</script></head><body ng-controller="AppCtrl"><ion-header-bar><h1>Contacts</h1><div><button 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.html" type="text/ng-template"><ion-modal-view><ion-header-bar><h1>New Contact</h1><button ng-click="modal.hide()">Cancel</button></ion-header-bar><ion-content><div><label><span>First Name</span><input ng-model="newUser.firstName" type="text"></label><label><span>Last Name</span><input ng-model="newUser.lastName" type="text"></label><label><span>Email</span><input ng-model="newUser.email" type="text"></label><button ng-click="createContact(newUser)">Create</button></div></ion-content></ion-modal-view></script></body></html>