ionic之AngularJS扩展动态组件 - CNode技术社区
积分: 1095
好好学习，天天向上
1. 模态对话框 : $ionicModal
2. 上拉菜单 : $ionicActionSheet
3. 弹出框 : $ionicPopup
4. 浮动框 : $ionicPopover
5. 载入指示器 : $ionicLoading
6. 背景幕 : $ionicBackdrop
1. 模态对话框 : $ionicModal
模态对话框 : $ionicModal
模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他 的用户交互行为被阻止。
在ionic中使用模态对话框有三个步骤：
1.声明对话框模板
使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板：
&script id="a.html" type="text/ng-template"&
&ion-modal-view&
&/ion-modal-view&
2.创建对话框对象
服务$ionicModal有两个方法用来创建对话框对象：
fromTemplate(templateString,options) - 使用字符串模板
fromTemplateUrl(templateUrl,options) - 使用内联模板
这两个方法返回的都是一个对话框对象。
3.操作对话框对象
对象框对象有以下方法用于显示、隐藏或删除对话框：
show() - 显示对话框
hide() - 隐藏对话框
remove() - 移除对话框
isShown() - 对话框是否可视？
2. 上拉菜单 : $ionicActionSheet
上拉菜单是一个自屏幕底部向上滑出的菜单，通常用来让用户做出选择。
ionic的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单：
取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单 最多有一个取消按钮。
危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险选项按钮。
自定义按钮 - 用户定义的任意数量的按钮。
在ionic中使用上拉菜单需要遵循以下步骤：
1.定义上拉菜单选项
使用一个JSON对象定义上拉菜单选项，包括以下字段：
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其text字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发
cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
cssClass - 附加的CSS样式类名称
2.创建上拉菜单
$ionicActionSheet服务的show()方法用来创建上拉菜单，返回一个函数，调用该 返回函数可以关闭此菜单。
3.弹出框 : $ionicPopup
弹出框通常用于提醒、警告等，在用户响应之前其他交互行为不能继续。与模态 对话框覆盖整个屏幕空间不同，弹出框通常仅占据一部分屏幕空间。
在ionic中，使用$ionicPopup服务管理弹出框：
$ionicPopup.show(options)
.then(function(){
//这个函数在弹出框关闭时被调用
show()方法返回的是一个promise对象，当弹出框关闭后，该对象被解析，这意味着 then()方法指定的参数函数此时将被调用。
show()方法的参数options是一个JSON对象，可以包括以下字段：
title - 弹出框标题文本
subTitle - 弹出框副标题文本
template - 弹出框内容的字符串模板
templateUrl - 弹出框内容的内联模板URL
scope - 要关联的作用域对象
buttons - 自定义按钮数组。按钮总是被置于弹出框底部
cssClass - 附加的CSS样式类
简化的特定弹出框
除了show()方法，$ionicPopup还针对一些特定场景提供了简化的方法，这些方法不需要 自定义按钮，只需要设置title和template即可：
alert(options) - 警告弹出框，仅包含一个按钮供关闭弹出框
confirm(options) - 确认弹出框，包含一个取消按钮和一个确认按钮
prompt(options) - 输入提示弹出框，包含一个文本输入框、一个取消按钮和一个确认按钮
4.浮动框 : $ionicPopover
浮动框通常用以非侵入的方式提供当前视图的额外信息。
在ionic中使用浮动框的几个步骤：
1.声明模板
需要首先利用ion-popover-view指令声明一个模板内容：
&ion-popover-view&
&!--模板内容--&
&/ion-popover-view&
2.创建浮动框对象
使用$ion-popover服务的以下方法创建浮动框对象：
fromTemplate(templateString,options) - 使用模板字符串构造浮动框
fromTemplateurl(templateUrl,options) - 使用内联模板构造浮动框
注意：这两个方法返回的都是promise对象，在浮动框对象被构造 成功后得到解析，这时可以获取浮动框对象：
$ionicPopover.fromTemplate(...)
.then(function(popover){
//popover参数是浮动框对象
3.操作浮动框对象
浮动框对象提供以下方法：
show() - 显示浮动框
hide() - 关闭浮动框
remove() - 移除浮动框
isShown() - 浮动框是否处于显示状态？
5.载入指示器 : $ionicLoading
当进行耗时的操作时，可以使用载入指示器提示用户操作进行中，并暂时阻止交互。 载入指示器通常会叠加一个半透明的幕布层以便阻止用户的交互。
在ionic中，使用$ionicLoading服务操作载入指示器：
show(options) - 显示载入指示器
hide() - 隐藏载入指示器
show()方法的options参数是一个JSON对象，可以包含如下字段：
template - 模板字符串
templateUrl - 内联模板的Url
scope - 要绑定的作用域对象
noBackdrop - 是否隐藏背景幕
hideOnStateChange - 当切换到新的视图时，是否隐藏载入指示器
delay - 显示载入指示器之前要延迟的时间，以毫秒为单位，默认为0，即不延迟
duration - 载入指示器持续时间，以毫秒为单位。时间到后载入指示器自 动隐藏。默认情况下， 载入指示器保持显示状态，知道显示的调用hide()方法
参数配置服务 : $ionicLoadingConfig
如果要在多处都使用载入指示器，统一对options参数进行配置是一个更好的方法，这样 在应用时直接调用show()方法而不必传递参数了。这通过定义一个constant provider来实现：
angular.module(&ezApp&, [&ionic&])
.constant(&$ionicLoadingConfig&,{
template : &default loading template ...&
$ionicLoading服务会通过注入器查找这个常量，如果存在就使用其值作为参数进行显示。
6.背景幕 : $ionicBackdrop
在浮动框、载入指示器中我们已经接触过背景幕。它是一个覆盖全屏的半透明图层，用来 阻止用户的交互行为。
我们可以使用*$ionicBackdrop*服务单独地使用背景幕：
retain() - 保持背景幕
release() - 释放背景幕
为什么不是show()和hide()呢？
在UI中可能有多个指令/元素都使用背景幕，为每个指令都创建单独的背景幕是不明智的。
事实上，$ionicBackdrop服务在DOM中只保留有一个背景幕。每次当使用retain()方法时， 只是给背景幕加一次锁，release()方法只是给背景幕解一次锁。如果retain()被调用三次， 背景幕将一直显示，直到release()也被调动三次后才隐藏。
参考资料：
链接里面附示例
各种IONIC 精选项目喜欢的 访问
这也行？生意如何？
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的实例讲解使用SVG制作loading加载动画的方法
作者：佚名
字体：[ ] 来源：设计达人 时间：04-05 11:13:52
这篇文章主要介绍了使用SVG制作loading加载动画的方法,文中还列举了使用ionic库中的加载效果实例,需要的朋友可以参考下
今天和大家分享一个以SVG图像为主的loading加载动画，现在移动端网页使用比较多，若还用GIF做loading图片的话，可能会影响图像的质量，所以使用SVG是一个不错的方式。
这次展示的代码由 Aurer 编写，前端人员只需要直接复制想要的SVG代码就能直接使用，而且可以改变颜色。当然，对于好学的同学，也可以研究下这个代码的编写原理。
接下来设计达人网小编为大家讲解这个使用方法，其实是相当简单的。
STEP 1: 复制你想要的SVG加载动画代码到&body&里面，小编随意复制一个代码如下：
&version=&1.1&&id=&Layer_1&&xmlns=&http://www.w3.org/2000/svg&&xmlns:xlink=&http://www.w3.org/1999/xlink&&x=&0px&&y=&0px&&width=&24px&&height=&30px&&viewBox=&0&0&24&30&&style=&enable-background:new&0&0&50&50;&&xml:space=&preserve&&&
&x=&0&&y=&0&&width=&4&&height=&10&&fill=&#333&&transform=&translate(0&15.1665)&&&
&attributeType=&xml&&attributeName=&transform&&type=&translate&&values=&0&0;&0&20;&0&0&&begin=&0&&dur=&0.6s&&repeatCount=&indefinite&&&
&x=&10&&y=&0&&width=&4&&height=&10&&fill=&#333&&transform=&translate(0&11.5002)&&&
&attributeType=&xml&&attributeName=&transform&&type=&translate&&values=&0&0;&0&20;&0&0&&begin=&0.2s&&dur=&0.6s&&repeatCount=&indefinite&&&
&x=&20&&y=&0&&width=&4&&height=&10&&fill=&#333&&transform=&translate(0&1.83315)&&&
&attributeType=&xml&&attributeName=&transform&&type=&translate&&values=&0&0;&0&20;&0&0&&begin=&0.4s&&dur=&0.6s&&repeatCount=&indefinite&&&
此时代码已经可以带动画了，但没颜色，请继续看STEP2添加颜色。
STEP 2 : 为SVG图像添加颜色
给你的样式表添加如下样式，里面的颜色代码换上你喜欢的即！
svg&path,svg&rect{fill:&#FF6700;} &&
完成！最终DEMO：
ionic库中的加载动画使用ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。安装很简单，如果有npm，Window 和 Linux 上打开命令行工具执行以下命令：代码如下:$ npm install -g cordova ionicMac 系统上使用以下命令：代码如下:sudo npm install -g cordova ionic提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。如果你已经安装了以上环境，可以执行以下命令来更新版本:代码如下:npm update -g cordova ionic或代码如下:sudo npm update -g cordova ionic
下面我们来看一下具体的两个加载相关的用法：
ionic 加载动作 $ionicLoading$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。使用实例：HTML 代码：
&ng-app=&ionicApp&&&
&&&&&charset=&utf-8&&&
&&&&&name=&viewport&&content=&initial-scale=1,&maximum-scale=1,&user-scalable=no,&width=device-width&& &&
&&&&Ionic&Modal&&
&&&&&&href=&/static/ionic/css/ionic.min.css&&rel=&stylesheet&&&
&&&&&src=&/static/ionic/js/ionic.bundle.min.js&&&
&ng-controller=&AppCtrl&&&
&&&&&&&title=&Home&&&
&&&&&&&&&&
&&&&&&&&&&&class=&title&The&Stooges&&
&&&&&&&&&&
&&&&&&&&&has-header=&true&&&
&&&&&&&&&&&&
&&&&&&&&&&&&&ng-repeat=&stooge&in&stooges&&href=&#&{{stooge.name}}&&
&&&&&&&&&&&&
&&&&&&&&&&
JavaScript 代码
angular.module(&ionicApp&,&[&ionic&]) &&
.controller(&AppCtrl&,&function($scope,&$timeout,&$ionicLoading)&{ &&
&&$ionicLoading.show({ &&
&&&&content:&&Loading&, &&
&&&&animation:&&fade-in&, &&
&&&&showBackdrop:&true, &&
&&&&maxWidth:&200, &&
&&&&showDelay:&0 &&
&&$timeout(function&()&{ &&
&&&&$ionicLoading.hide(); &&
&&&&$scope.stooges&=&[{name:&&Moe&},&{name:&&Larry&},&{name:&&Curly&}]; &&
&&},&2000); &&
$ionicLoadingConfig使用实例：
&scroll=&false&&class=&has-header&&&
&&&&&icon=&android&&&
&&&&&icon=&ios&&&
&&&&&icon=&ios-small&&&
&&&&&icon=&bubbles&&class=&spinner-balanced&&&
&&&&&icon=&circles&&class=&spinner-energized&&&
&&&&&icon=&crescent&&class=&spinner-royal&&&
&&&&&icon=&dots&&class=&spinner-dark&&&
&&&&&icon=&lines&&class=&spinner-calm&&&
&&&&&icon=&ripple&&class=&spinner-assertive&&&
&&&&&icon=&spiral&&&
&&cursor:&url(&/try/demo_source/finger.png&),&auto; &&
&&text-align:&center; &&
&&margin-bottom:&40px&!important; &&
.spinner&svg&{ &&
&&width:&19%&!important; &&
&&height:&85px&!important; &&
JavaScript 代码
angular.module(&ionicApp&,&[&ionic&]) &&
.controller(&MyCtrl&,&function($scope)&{& &&
大家感兴趣的内容
12345678910
最近更新的内容angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
&// Setup the loader
&$ionicLoading.show({
& &content: 'Loading',
& &animation: 'fade-in',
& &showBackdrop: false,
& &maxWidth: 200,
& &showDelay: 0
&// Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
&$timeout(function () {
& &$ionicLoading.hide();
& &$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
&}, 2000);
show(opts) 显示加载提示
{string=} template html模板
{string=} templateUrl 通过url加载模板
{object=} scope 作用域. 默认是$rootScope.
{boolean=} noBackdrop Whether to hide the backdrop. By default it will be shown.
{boolean=} hideOnStateChange Whether to hide the loading spinner when navigating to a new state. Default false.
{number=} delay 延迟显示，多少毫秒后显示加载提示
{number=} duration 自动隐藏，多少毫秒后自动隐藏加载提示。默认是不自动隐藏
hide() 隐藏加载提示
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：61116次
排名：千里之外
原创：35篇
转载：23篇
(1)(1)(3)(4)(3)(1)(1)(3)(1)(1)(3)(1)(1)(1)(1)(1)(3)(4)(1)(1)(6)(10)(7)angularjs - $ionicLoading loading forever - Stack Overflow
to customize your list.
Announcing Stack Overflow Documentation
We started with Q&A. Technical documentation is next, and we need your help.
Whether you're a beginner or an experienced developer, you can contribute.
I am trying to show ionic loader until my data is received but somehow its loading forever. I checked some solutions but did not work. This is my code.
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
$scope.allcourses = CourseFactory.FindFreeCourses($scope.search).then(function(result){
console.log(result);
$scope.allfreestadiums =
$ionicLoading.hide();
}, function(error){
console.log(error);
$ionicLoading.hide();
$ionicLoading.show({
template: 'Network Error',
scope: $scope
$timeout(function() {
$ionicLoading.hide();
When I call only
$scope.allcourses = CourseFactory.FindFreeCourses($scope.search);
It's working fine but I want to show a loading before it appears on the screen.
What could be the problem ?
console.log() may behave differently on a device/emulator than on a browser. While a browser will typically accept any object as a param, as console.log(obj), this is problematic on devices. You may want to try this instead:
console.log("some message", JSON.stringify(obj))
$ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 });
$scope.allcourses = CourseFactory.FindFreeCourses($scope.search).then(function(result){
$ionicLoading.hide();
$scope.allfreestadiums =
console.log("success", JSON.stringify(result));
}, function(error){
$ionicLoading.hide();
console.log("error", JSON.stringify(error));
It is also possible that the console.log() function is failing because console is not defined when called. It depends on how you are testing and if the environment exposes the console variable by default. It's a bit of a Schrodinger scenario - the act of opening the dev console makes the problem go away because the console variable is defined when you do that on some browsers. Try commenting out the console.log() calls and move $ionicLoading.hide() to the top of those callbacks.
Or you can check that window.console exists before calling console.log() as shown here:
$ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 });
$scope.allcourses = CourseFactory.FindFreeCourses($scope.search).then(function(result){
$ionicLoading.hide();
window.console && console.log("success", JSON.stringify(result));
$scope.allfreestadiums =
}, function(error){
$ionicLoading.hide();
window.console && console.log("error", JSON.stringify(error));
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled