$ionicModal
$ionicModal can cover 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 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
Then you can inject $ionicModal in your Controller. Then call the template you just wrote to perform initialization operations. 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)
| Parameters | Type | Details |
|---|
| templateString | String | The string of the template is used as the content of the model. |
| options | Object | options will be passed to the ionicModal#initialize method. |
Returns: object, an instance of the ionicModal controller.
fromTemplateUrl(templateUrl, options)
| Parameters | Type | Details |
|---|
| templateUrl | String | The url to load the template. |
| options | Object | Pass the object through the ionicModal#initialize method. |
Returns: promise object. The Promises object is a specification proposed by the CommonJS working group to provide a unified interface for asynchronous programming.
ionicModal
Instanced by the $ionicModal service.
Tip: When you complete each module cleanup, be sure to call the remove() method to avoid memory leaks.
Note: A module broadcasts 'modal.shown' and 'modal.hidden' from its initial scope, passing itself as a parameter.
Method
initialize(可选)
Create a new model controller example.
| Parameters | Type | Details |
|---|
| options | Object | An options object has the following properties: {object=} Scope The scope of the subclass. Default: Create a $rootScope subclass.
{string=} animation With animation to show or hide. Default: 'slide-in-up'
##{boolean=} The first input box gets focus When displayed, the model's Whether the first input element automatically gets focus. Default: false. {boolean=}backdropClickToClose` Whether to close the model when clicking on the background. Default: true.
|
show()
Display model instance
hide()
Hide model.
remove()
Removed from the DOM Model instance and cleanup.
isShown()
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>php中文网(php.cn)</title>
<link href="http://www.php.cn/static/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.php.cn/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.html" 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('../style/images/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();
};
});
