本文整理自网络,侵删。
ionic 模态窗口
$ionicModal
$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>
然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板,进行初始化操作。就像下面的代码:
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
由$ionicModal服务实例化。
提示:当你完成每个模块清除时,确保调用remove()方法,以避免内存泄漏。
注意:一个模块从它的初始范围广播出 'modal.shown' 和 'modal.hidden' ,把自身作为一个参数来传递。
相关阅读 >>
更多相关阅读请进入《ionic》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者