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. hihoCoder #1143 : 骨牌覆盖问题·一

    #1143 : 骨牌覆盖问题·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题:我们有一个2xN的长条形棋盘,然 ...

  2. 洛谷P2424/codevs 2606 约数和

    http://codevs.cn/problem/2606/ https://luogu.lohu.info/problem/show?pid=2424 题目背景 Smart最近沉迷于对约数的研究中. ...

  3. Docker中执行Shell出现乱码

    问题描述 最近遇到一个问题: 执行命令 docker exec f4af9b sh -c 'bash /tmp/build.sh' 命令在docker中执行shell,会出现中文乱码的问题.但是在do ...

  4. 多角度看.NET面试题

    1．ASP.NET中的身份验证有那些?你当前项目采用什么方式验证请解释        身份验证是从用户获取名称和密码等标识凭证并根据某些机构验证这些凭据的过程.如果凭据有效,则提交该凭据的实体被视为通 ...

  5. IFrame跨域处理方法-Javascript

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...

  6. 为FreeBSD安装adobe flash插件

    参考 FreeBSD官方手册浏览器一章. pkg install nspluginwrapper nspluginwrapper 是一个辅助安装配置 NetScape Plugin的工具. 可以为Ne ...

  7. POJ 3164 Command Network （ 最小树形图 朱刘算法）

    题目链接 Description After a long lasting war on words, a war on arms finally breaks out between littlek ...

  8. 49、多线程创建的三种方式之继承Thread类

    继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...

  9. mogodb的安装与配置

    下载:https://www.mongodb.com/https://www.mongodb.com/ 安装:一直next,中间选择custom,选择自己的安装路径,最后安装成功. 配置:打开安装好的 ...

  10. STM8CubeMx来了

    几年前出来的STM32CubeMx是众多stm32开发者的福音,大大缩短了开发者的开发周期.就在前几天,st官网宣布针对stm8的图形配置工具stm8cube横空出世. 如果你还不知道STM32Cub ...