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. 2015/11/4用Python写游戏，pygame入门(4)：获取鼠标的位置及运动

    按昨天的说法,今天将开始做一个简单的游戏了. 目标是拷贝微信的飞机大战,当然拷贝完以后大家就具备自己添加不同内容的能力了. 首先是要拿到一些图片素材,熟悉使用图像处理软件和绘画的人可以自己制作,并没有 ...

  2. [Luogu 3952] NOIP2017 时间复杂度

    [Luogu 3952] NOIP2017 时间复杂度 一年的时间说长不长,说短,也不短. 一年之内无数次觉得难得可怕的题目,原来也就模拟这么回事儿. #include <cstdio> ...

  3. hbase系列之：初识hbase

    一.概述 在hadoop生态圈里,hbase可谓是鼎鼎大名.江湖传言,hbase可以实现数十亿行X数百万列的实时查询,可横向扩展存储空间.如果传言为真,那得好好了解了解hbase.本文从概念上介绍hb ...

  4. ConcurrentHashMap 产生NullPointerException

    今天测试在发给我一段报错日志后,根据日志定位到从ConcurrentHashMap 的缓存中get的时候,ConcurrentHashMap的底层抛出了空指针,当时感觉很奇怪为什么在get的时候产生空 ...

  5. Spyder简述

    导言 想打造轮子, 就必须要有一套完善的造轮子的工具. 我在jupyter+sciTE的组合里转来转去, 最后还是打算放弃这个组合, 因为离开了自动完成/调用提示/随时随地的访问文档帮助, 前行之路太 ...

  6. 【leetcode 简单】 第八十九题 赎金信

    给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串,判断第一个字符串ransom能不能由第二个字符串magazines里面的字符构成.如果可以构成,返回 true :否则返回 ...

  7. win7.wifi热点

    使用本地连接上网,将网卡设为wifi热点 cmd 管理员身份运行 netsh wlan set hostednetwork mode=allow ssid=4Gtest key=12345678 网络 ...

  8. [转]计算机视觉之跟踪算法——相关滤波器Correlation Filter

    https://blog.csdn.net/victoriaw/article/details/62416759 ASEF相关滤波器: Average of Synthetic Exact Filte ...

  9. Unity 3（一）：简介与示例

    本文关注以下方面(环境为VS2012..Net Framework 4.5以及Unity 3): Ioc/DI简介: Unity简单示例 一.Ioc/DI简介 IoC 即 Inversion of C ...

  10. Python标准库内置函数complex介绍

    from:http://www.jb51.net/article/57798.htm 本函数可以使用参数real + imag*j方式创建一个复数.也可以转换一个字符串的数字为复数:或者转换一个数字为 ...