将组件封装起来在项目中开发很实用,之前遭遇过一次痛苦的经历,那阵子改的要吐血了。常用的组件封装起来,改公共的地方,往往多处受用。

例如:我在项目中引用  tips.text('加载中。。。',false) ;

参数设为false时,tips会一直显示,可以在请求成功后,让tips 隐藏了;参数不设置的时候,tips两秒后消失。

PS:isHide && (timeoutId = setTimeout(function() {ele.style.display = 'none'; }, 2000)); 这句困扰了好久,这是tips一直显示的原因,最后终于明白了,&&方法:当只有前面的为true,后面的才可以执行,并返回后面的值。附上篇觉得写得不错的一篇文章:

http://wenrunchang123.iteye.com/blog/1749802

module.exports = function() {
angular.module('App').factory('tips', function() {
var $ = angular.element;
var ele = angular.element('<div id="tips"></div>')[0];
var $ele = $(ele); var style = {
display: 'none',
padding: '5px 10px',
'text-align': 'center',
position: 'fixed',
left: '50%',
transform: 'translate(-50%, -50%)',
'background-color': 'rgba(0,0,0,.6)',
color: '#fff',
'z-index': '9999',
'border-radius': '5px'
}; angular.element(ele).css(style);
document.body.appendChild(ele);
var timeoutId = null; return {
text: function(msg, isHide) {
isHide = isHide !== undefined ? isHide : true;
ele.style.display = 'inline-block';
ele.style.bottom = '50%';
ele.innerHTML = msg; clearTimeout(timeoutId);
isHide && (timeoutId = setTimeout(function() {
ele.style.display = 'none';
}, 2000));
},
hide: function() {
ele.style.display = 'none';
},
tips: function(options) {
if (options.style) {
for (var p in options.style) {
ele.style[p] = options.style[p];
}
}
ele.style.display = 'inline-block';
ele.innerHTML = options.msg; clearTimeout(timeoutId);
(options.isHide || options.isHide === undefined) && (timeoutId = setTimeout(function() {
ele.style.display = 'none';
}, options.timeout || 2000));
}
}
});
};

angular组件--tips提示功能的更多相关文章

  1. VS2013中实现angular代码智能提示

    第一步:在项目同添加angular js文件的引用: 这里使用NuGet包管理器来给项目添加angular js install-package angularjs 第二步:添加智能提示js文件 我们 ...

  2. [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

    使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...

  3. JavaScript实现邮箱后缀提示功能

    先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀 ...

  4. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  5. 手把手教你搭建自己的Angular组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  6. eclipse自动提示功能没了的解决办法(转载)

    eclipse自动提示功能没了的解决办法 标签: eclipse联想 2012-08-09 14:32 24687人阅读 评论(7) 收藏 举报  分类: Android(38)  版权声明:本文为博 ...

  7. 解决 PhpStorm 对 用单例模式实例化PHP类时,代码自动提示功能失效 的问题

    大部分PHP框架中,为了防止一个类被重复实例化,往往采用“单例模式”实例化类.我们的项目框架是这样做的: 先写好一个基类 /framework/Base.class.php,内容如下: <?ph ...

  8. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  9. 一个.net程序员的安卓之旅-Eclipse设置代码智能提示功能

    一个.net程序员的安卓之旅-代码智能提示功能 过完年回来就决心开始学安卓开发,就网上买了个内存条加在笔记本上(因为笔记本原来2G内存太卡了,装了vs2010.SQL Server 2008.orac ...

随机推荐

  1. Delphi7卸载indy9,安装indy10步骤

    1. 找到C:\Program Files\Borland\Delphi7\Borland Delphi7.msi——双击——点Next——选择Modify,点Next——找到Program File ...

  2. 小白对异步IO的理解

    前言 看到越来越多的大佬都在使用python的异步IO,协程等概念来实现高效的IO处理过程,可是我对这些概念还不太懂,就学习了一下. 因为是初学者,在理解上有很多不到位的地方,如果有错误,还希望能够有 ...

  3. C语言函数篇(二)函数参数基础设计

    形参实现一种数据传入的接口 ,由 实参 拷贝给 形参. 拷贝!!!!!!!!!!! 例1: void func(int tmp){ //意图是实现传进来的参数 +1 tmp++; } int mian ...

  4. 开放定址法——线性探测(Linear Probing)

    之前我们所采用的那种方法,也被称之为封闭定址法.每个桶单元里存的都是那些与这个桶地址比如K相冲突的词条.也就是说每个词条应该属于哪个桶所对应的列表,都是在事先已经注定的.经过一个确定的哈希函数,这些绿 ...

  5. POJ:1258-Agri-Net

    Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 65322 Accepted: 27029 Descriptio ...

  6. Dapper.Extension的基本使用

    前言    上一篇随笔写了Dapper的简单的使用,这次写一下Dapper.Extension的使用,它是Dapper的简单的封装扩展,可以通过实例化的对象赋值后进行增删改的操作以及分页,但是却不能进 ...

  7. 抽象类的作用之一:sdk 传递你需要的参数

    抽象类可以干什么?抽象类可以让别人必须做一件事情,比如实现一个方法. 那它有什么作用呢? 我开始也不知道啊,后来慢慢的知道了,在开发中,我知道了它是干什么的,怎么用的.比如你要写一个sdk给别人用.但 ...

  8. spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解

    读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...

  9. IOS客户端的个人中心可以查看自己的博客了。

    IOS客户端的个人中心可以查看自己的博客了. 写这篇是为了在客户端显示之用. 下一步实现在客户端发博客.

  10. Pascal小游戏 不要消灭星星

    不要消灭星星 Pascal小游戏 Chaobs改编自pascal吧 控制台小游戏嘛,就当是练习一下结构化的写法. program wxtw; uses crt; type      zbdy=reco ...