利用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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
js实现随机抽奖
Mar 19 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
vue组件实例解析
2017/01/10 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
vue实现评价星星功能
2020/06/30 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python中运算符"=="和"is"的详解
2016/10/08 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
解决Mac下使用python的坑
2019/08/13 Python
py-charm延长试用期限实例
2019/12/22 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
Golang 链表的学习和使用
2022/04/19 Golang