ionic中的$inoicModal

ionic中的模态窗口

在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】

其次在ionic中,还有一种新的弹窗,这样的弹窗,会占据整个页面,成为模态窗口,模态窗口可以通过$ionicModal服务来进行创建、显示、隐藏、移除等功能。

模态窗口,为了加载方便,通常会在页面中的script标签中进行添加,如下

<script type="text/ng-template" id="modal">
    <!-- 此处是添加HTML模板内容的地方 -->
   <div class="modal">
          <ion-header-bar>
                    <h1 class="title">模态窗口标题</h1>
          </ion-header-bar>
          <ion-content>
                <!-- 模态窗口中显示的内容 -->
          </ion-content>
    </div>
</script>

在Angular的控制器中,就可以初始化这个模态窗口,并且定义函数来进行显示、隐藏、删除的控制

var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope, $ionicModal) {
    // 初始化窗口
    $ionicModal.fromTemplateUrl("modal", {
      scope:$scope,
      animation:"slide-in-up"
    }).then(function(modal) {
        $scope.dialog = modal;
    });

     // 显示模态窗口的函数
      $scope.openModal = function() {
          $scope.dialog.show();
      }
      // 隐藏模态窗口的函数
      $scope.hideModal = function() {
        $scope.dialog.hide();
      }
      // 删除模态窗口的函数:慎重使用,一旦删除,这个窗口将不可用
      $scope.removeModal  = function() {
          $scope.dialog.remove();
      }
});

在HTML页面中,就可以直接调用了

<ion-header-bar>
    <button class="button button-clear" ng-click="openModal()">显示模态窗口</button>
    <h1 class="title">页头标题</h1>
</ion-header-bar>

以上是关于ionic中模态窗口的使用方式,仅供参考。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

Python实现图像空域随机水印加入与提取

本文要点在于Python扩展库pillow中Image类的运用。图像空域随机水印的主要思路在于:在原始图像中随机选取一些位置替换为水印图片中的非背景像素,同时生...

52550
来自专栏腾讯NEXT学位

药药切克闹!用酷炫的vue~制作酷炫的menu~

42050
来自专栏大数据挖掘DT机器学习

信息图制作教程案例

当大家看到很多好看的信息图的时候最喜欢问的两个问题是:用什么软件做的?怎么做的? 在工具选择上,使用Adobe Illustrator,制作过程大家...

41570
来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

18440
来自专栏WindCoder

Ps中懵懂斋老师的抽线方法

首先,打开要抽线的图片(Ctrl+O),复制图层(Ctrl+J)。抽线效果一般不需要保留色彩。使用图像>调整>去色(Shift+Ctrl+U),然后再复制一个图...

15710
来自专栏xingoo, 一个梦想做发明家的程序员

BootStrap网格布局

  如何使用BootStrap样式   BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。 <link rel="styleshee...

234100
来自专栏Petrichor的专栏

opencv: cv2.rectangle 通过确定对角线 画矩形

在做项目的过程中,标记数据是记录每个 bounding box 的左上角和右下角坐标。因为用到了数据增强,所以我有了一个疑虑:

30020
来自专栏前端黑板报

纯CSS实现宽高相等(或者其他比例)

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。 基础结构与样式: 1 2<div class="box"> </div> ...

39870
来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

作者:汪娇娇 时间:2017年9月5日 单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么...

33180
来自专栏我的博客

关于制作手机网页笔记

1、px和rem换算 em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便 rem 的出现就可以避免这类计算的问题,再也不用担心父级元素的...

36580

扫码关注云+社区

领取腾讯云代金券