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

  });

});






实例

HTML 代码

<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>菜鸟教程(runoob.com)</title>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.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>

CSS 代码

body {

  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;

}

JavaScript 代码

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();

  };

});





Ionic Js十一：模态的更多相关文章

  1. Ionic Js十：加载动作

    $ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...

  2. Ionic Js九：列表操作

    列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list ...

  3. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  4. ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。 该图标采用的是SVG

    ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...

  5. 使用异步js解决模态窗口切换的办法

    核心代码 js ="setTimeout(function(){document.getElementsByTagName('Button')[3].click()},100);" ...

  6. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  7. JS中模态窗口(showModalDialog)的详细使用

    基本介绍: showModalDialog() (IE + 支持) showModelessDialog() (IE + 支持) window.showModalDialog() 方法用来创建一个显示 ...

  8. ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换

    ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...

  9. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

随机推荐

  1. [JSOI2007]字符加密Cipher

    bzoj 1031:[JSOI2007]字符加密Cipher Time Limit: 10 Sec  Memory Limit: 162 MB Description 喜欢钻研问题的JS同学,最近又迷 ...

  2. Java并发编程原理与实战三十:CountDownLatch与CyclicBarrier 区别

    相信每个想深入了解多线程开发的Java开发者都会遇到CountDownLatch和CyclicBarrier,大家也在网上看到各种介绍原理,代码的,以及他们区别(应付面试)的,但是很少能讲清楚:他们到 ...

  3. puppeteer截图

    puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库.可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进 ...

  4. SpringBoot 线程池配置 实现AsyncConfigurer接口方法

      目的是:  通过实现AsyncConfigurer自定义线程池,包含异常处理  实现AsyncConfigurer接口对异常线程池更加细粒度的控制 *a) 创建线程自己的线程池  b) 对void ...

  5. 推荐一些我所用的firefox 附加组件。

    firefox之所以强大,很大程度上是因为它有着超多的扩展组件,来实现许多有趣的功能.这几天把我装的firefox附加组件整理下,个人认为是一般上网常用或者可以说是必备的组件,o(∩_∩)o ,晒晒. ...

  6. python核心编程笔记——Chapter6

    Chapter 6.序列:字符串,列表和元组 这章内容比较多啊,看得比较久,而且题目又难很多. 6.1鉴定一个字符串是否是另外一个字符串的字串,这道题目不是很确定,好像没有直接的判定吧. 直接是否内建 ...

  7. TED_Topic4：How I fell in love with quasars, blazars and our incredible universe

    By Jedidah Isler # Background about our speaker Jedidah Isler studies blazars(耀变天体) — supermassive h ...

  8. 【BZOJ】2006: [NOI2010]超级钢琴

    [题意]给定长度为n的整数序列,求长度为[L,R]的前k大区间和的和.n,k<=500000. [算法]堆+贪心+RMQ [题解]考虑暴力是取所有长度为[L,R]的子串的前k大求和,复杂度O(n ...

  9. 20155217 2016-2017-2 《Java程序设计》第8周学习总结

    20155217 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 15.1日志 15.1.1日志API简介 java.util.logging包提供了日志功能 ...

  10. 基本控件文档-UISwitch属性

    CHENYILONG Blog 基本控件文档-UISwitch属性 Fullscreen     UISwitch属性 技术博客http://www.cnblogs.com/ChenYilong/ 新 ...