$ionicModal 可以遮住用户主界面的内容框。
你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。
| <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> |
| 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 |
| }); |
| }); |
| fromTemplate(templateString, options) |
| 参数 | 类型 | 详情 |
|---|---|---|
| templateString |
字符串
|
模板的字符串作为模态窗口的内容。 |
| options |
对象
|
options 会传递到 ionicModal#initialize方法中。 |
返回: 对象, 一个ionicModal控制器的实例。
| fromTemplateUrl(templateUrl, options) |
| 参数 | 类型 | 详情 |
|---|---|---|
| templateUrl |
字符串
|
载入模板的url。 |
| options |
对象
|
通过ionicModal#initialize方法传递对象。 |
返回： promise对象。Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。
由$ionicModal服务实例化。
提示：当你完成每个模块清除时，确保调用remove()方法，以避免内存泄漏。
注意：一个模块从它的初始范围广播出 'modal.shown' 和 'modal.hidden' ，把自身作为一个参数来传递。
方法
| initialize(可选) |
创建一个新的模态窗口控制器示例。
| 参数 | 类型 | 详情 |
|---|---|---|
| options |
对象
|
一个选项对象具有一下属性：
|
| show() |
显示模态窗口实例
promise promise对象,在模态窗口完成动画后得到解析
| hide() |
隐藏模态窗口。
promise promise对象,在模态窗口完成动画后得到解析
| remove() |
从 DOM 中移除模态窗口实例并清理。
promise promise对象,在模态窗口完成动画后得到解析
| 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>芝麻教程(web3.xin)</title> |
| <link href="//cdn.bootcss.com/ionic/1.3.0/css/ionic.min.css" rel="stylesheet"> |
| <script src="//cdn.bootcss.com/ionic/1.3.0/js/ionic.bundle.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> |
| body { |
| cursor: url('http://www.web3.xin/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.html', { |
| scope: $scope |
| }).then(function(modal) { |
| $scope.modal = modal; |
| }); |
| $scope.createContact = function(u) { |
| $scope.contacts.push({ name: u.firstName + ' ' + u.lastName }); |
| $scope.modal.hide(); |
| }; |
| }); |
