广东省网站备案注销,wordpress生成的html代码,wordpress 获取别名,淄博铭锐 网站建设Ionic中[弹出式窗口]有两种#xff08;如下图所示#xff09;#xff0c;$ionicModal和$ionicPopup; $ionicModal是完整的页面#xff1b; $ionicPopup是(Dialog)对话框样式的#xff0c;直接用JavaScript设定对话框的一些参数#xff0c;通常用于通知消息、确认等作用如下图所示$ionicModal和$ionicPopup; $ionicModal是完整的页面 $ionicPopup是(Dialog)对话框样式的直接用JavaScript设定对话框的一些参数通常用于通知消息、确认等作用 本文主要介绍IonicModal的使用方法 中文文档http://ionicframework.net/docs/api/service/$ionicModal/ 英文文档http://ionicframework.com/docs/api/service/$ionicModal/ $ionicModal中文翻译为‘模型’感觉还是直接称为用Modal好一点。 模型是一个内容面板可以临时越过用户的主视图。通常用于选择或编辑一个项。注意你需要把模型的内容放入一个带有modal类的div内。 举个例子啥是Modal 登录或者注册页面的用户协议图1点击“用户协议”之后会弹出用户协议具体内容图2这个地方就可以使用Modal来实现。图3中展示了Application运行起来之后登录页面的源代码这些都是ionic自己生成的忽略其他信息只看我标出来的红色1和红色2当前红色2的元素是hide当我们点击“用户协议”之后红色2就会从“hide”变成“actived”这时候我们就看到了图2的内容了。 图1 登录界面用户协议 图2 用户协议具体内容Modal 图3 查看网页源代码 如何实现Modal 首先要有自己Modal的html代码注意你需要把模型的内容放入一个带有modal类的div内。 script idmy-modal.html typetext/ng-templatediv classmodalion-header-barh1 classtitle我的模型标题/h1/ion-header-barion-contentHello!/ion-content/div
/script 然后写自己的js代码其实就是AngularJS代码 这部分需要注意以下几点 1不要忘了function的参数$ionicModal否则会报错用浏览器的调试工具F12可以看到 2使用fromTemplateUrl将HTML代码中script根据id在HTML页面生成自己的Modal也就是说在打开页面的时候是没有图3中的红色2 div的当调用了fromTemplateUrl之后才会生成这个div而且每调用一次就会生成一个红色2 div哦所以写代码的时候要把逻辑设计好注意及时remove()。 3openModal和closeModal函数很容易理解这个估计是Modal最常用的方法 4可以通过$scope.$on来进行更丰富的操作当然不用$scope.$on也可以进行丰富的操作。 1 angular.module(testApp, [ionic])2 .controller(MyController, function($scope, $ionicModal) {3 $ionicModal.fromTemplateUrl(modal.html, {4 scope: $scope,5 animation: slide-in-up6 }).then(function(modal) {7 $scope.modal modal;8 });9 $scope.openModal function() {
10 $scope.modal.show();
11 };
12 $scope.closeModal function() {
13 $scope.modal.hide();
14 };
15 //当我们用完模型时清除它
16 $scope.$on($destroy, function() {
17 $scope.modal.remove();
18 });
19 // 当隐藏模型时执行动作
20 $scope.$on(modal.hide, function() {
21 // 执行动作
22 });
23 // 当移动模型时执行动作
24 $scope.$on(modal.removed, function() {
25 // 执行动作
26 });
27 }); 详细说说创建的方法 可以使用字符串或者一个URL fromTemplate(templateString, options) templateString 是字符串类型存储的是模型的内容 options是一个对象存储的是ionicModal#initialize方法的选项 返回一个Modal控制器实例 一个options对象具有一下属性 {object} 范围 子类的范围。默认创建一个$rootScope子类。{string} 动画 带有显示或隐藏的动画。默认slide-in-up{boolean} 第一个输入框获取焦点 当显示时模型的第一个输入元素是否自动获取焦点。默认false。{boolean}backdropClickToClose 点击背景时是否关闭模型。默认true。fromTemplateUrl(templateUrl, options) templateUrl 是字符串类型指向待加载模版的URL options与上边的一样 返回一个promise对象指向一个Modal控制器实例 更直观一点的使用url创建 1 $ionicModal.fromTemplateUrl(templates/hello.html, {// modal窗口选项
2 scope: $scope,
3 animation: silde-in-up
4 }).then(function (modal) {
5 $scope.modal modal;
6 }) templates目录下hello.html内容如下 1 ion-modal-view
2 ion-header-bar classbar-energized
3 h1 classtitle标题/h1
4 /ion-header-bar
5 ion-content
6 Hello~~~~
7 /ion-content
8 /ion-modal-view 参考链接这篇文章写的内容比较多初学者不容易看懂http://hybridap.blogspot.sg/2015/04/hybrid-apps52ionicmodal.html转载于:https://www.cnblogs.com/CheeseZH/p/4522264.html
