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 条评论
登录 后参与评论

相关文章

  • ionic中的$inoicPopover

    用ionic也有一段时间了,今天说一下它里面提供的一个小组件:浮动框 浮动框的使用在移动端的项目中已经很少了,只有在少数的一些特殊情况下才会出现。所以官方文档...

    大牧莫邪
  • 01.入门~Python前世今身

    说起Python的由来,那是1989年的圣诞节的夜晚,龟叔(Guido van Rossn)由于孩子教育的原因和妻子吵架,一个人独守客厅中的壁炉,无聊之中突发臆...

    大牧莫邪
  • 爬虫0060:scrapy快速入门爬虫高级操作:Scrapy framework

    官方网站:https://scrapy.org/,打开官方网站,可以看到一段关于scrapy的描述

    大牧莫邪
  • 经验之谈

    刚开始接触python是在我大三上学期的时候,有一点C语言的基础。语言的基础其实在各类编程语言都是互通的,只是被包装的不一样,只要掌握一门语言的基础,学习其他语...

    佛系编程人
  • 手把手教你学Numpy【二】基本运算与切片

    上一篇文章当中曾经提到过,同样大小的数据,使用Numpy的运算速度会是我们自己写循环来计算的上百倍甚至更多。并且Numpy的API非常简单,通常只要简单几行代码...

    TechFlow-承志
  • 字符串: KMP是时候上场了(一文读懂系列)

    因为是由这三位学者发明的:Knuth,Morris和Pratt,所以取了三位学者名字的首字母。所以叫做KMP

    代码随想录
  • HTTP协议之URL语法

    URL提供了一种对任意的一种互联网资源定位的手段。但是这些资源是可以通过不同的方案来(比如,HTTP,FTP,SMTP)进行访问的,因此URL的语法会随着方案的...

    魔王卷子
  • SAP CRM IBASE保存的逻辑分析

    Jerry Wang
  • java代码:判断月份的最后一天是多少 原

    LeoXu
  • SAP成都研究院数字创新空间基于SAP C4C开发的一个智能服务原型项目

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券