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. CSS中的选择器(笔记)

    1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele): ...

  2. 安装Win8引起Ubuntu启动项丢失的恢复过程

    画电路图的时候手痒,于是将之前做好的Win8PE拿出来装着玩儿.至于Win8的pE很好做,用UltraISO将Win8 的镜像用制作硬盘镜像的方法烧进U盘就行了. Win8的安装过程也很简单.安装前为 ...

  3. table表格frame属性

    定义和用法 frame 属性规定外侧边框的哪个部分是可见的. 从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加边框样式. 浏览器支持 除了 Internet Explorer,其他浏 ...

  4. 天梯 1083 Cantor表

    解题报告:发现规律就可以了,斜着看,第一条线上有1个,第二条线上有2个,....然后求出等差数列前n项和,求出N在第几条线上,然后就看N是在这条线上的第几个就可以了. #include<cstd ...

  5. SQL Server 将Id相同的字段合并，并且以逗号隔开

    例如:有表MO_Cook,字段:FoodRoom,name   有如下数据: 要求:将FoodRoom中值相同的字段合并成一行,并将name的值用逗号隔开. 需要用到:STUFF函数. 查询语句如下: ...

  6. 在linux上安装完oracle数据库后，如何修改ORACLE_HOSTNAME

    1.修改HOSTS文件,添加node2到本机IP地址的映射: [root@node2home]# gedit /etc/hosts 最后一行为添加的: 127.0.0.1 localhost loca ...

  7. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  8. 如何使用vs2012单步调试uGUI（unity3d 5.3f4）

    下载uGUI源代码 uGUI源代码地址:https://bitbucket.org/Unity-Technologies/ui 下载代码工具:tortoisehg-3.6.2-x64.msi http ...

  9. Python的日志记录-logging模块的使用

    一.日志 1.1什么是日志 日志是跟踪软件运行时所发生的事件的一种方法,软件开发者在代码中调用日志函数,表明发生了特定的事件,事件由描述性消息描述,同时还包含事件的重要性,重要性也称为级别或严重性. ...

  10. 【转】shell命令中>/dev/null 2>&1的实现原理

    异步执行 exec("/alidata/server/php/bin/php /nas/wxdoctor/index.php App/Common/WordsPic/user_id/&quo ...