利用Angular.js编写公共提示模块的方法教程


Posted in Javascript onMay 28, 2017

前言

在编写一些大型工程的时候,会经常遇到一些公用提示,使用框架自带很多时候不方便,于是我手写了一个,下面来看看详细的介绍:

效果图如下

利用Angular.js编写公共提示模块的方法教程

方法如下

一、先在angular中注册一个模块

利用Angular.js编写公共提示模块的方法教程

二、

利用Angular.js编写公共提示模块的方法教程
注册一个模块 注入依赖

三、

利用Angular.js编写公共提示模块的方法教程
返回不同的方法应对不同情况

四、

利用Angular.js编写公共提示模块的方法教程
获取模板路径

五、

利用Angular.js编写公共提示模块的方法教程
编写模板内容 和普通的页面一样调用使用angular服务

六、

利用Angular.js编写公共提示模块的方法教程

      1. 开启http服务获取模板内容

      2.  重点注意 $template = $compile(template)(scope); 这句代码非常重要  用于激活模板内容转成angular能识别的html代码片段

      3.提示框消失时间 设置回调函数 $template.detach();用于模板消失

七、

利用Angular.js编写公共提示模块的方法教程
设置html代码内的变量

      1.由于不在控制层 $scope对象无法获取不了值  所有需要用代替值  需要在使用时将$scope传入

八、使用方法如下

利用Angular.js编写公共提示模块的方法教程
记得在控制器里面注入alertModel模块

九、使用效果

利用Angular.js编写公共提示模块的方法教程

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家三水点靠木的支持。

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
Angular2入门教程之模块和组件详解
May 28 #Javascript
关于Angular2 + node接口调试的解决方案
May 28 #Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 #Javascript
设置cookie指定时间失效(实例代码)
May 28 #Javascript
Mac系统下Webstorm快捷键整理大全
May 28 #Javascript
获取url中用&隔开的参数实例(分享)
May 28 #Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 #Javascript
You might like
php计算税后工资的方法
2015/07/28 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
用ADODB.Stream转换
2007/01/22 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
一个JS翻页效果
2007/07/23 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
.net软件工程师面试题
2015/03/31 面试题
.NET面试10题
2014/02/24 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书