利用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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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
239军机修复记
2021/03/02 无线电
PHP个人网站架设连环讲(四)
2006/10/09 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python mysql断开重连的实现方法
2019/07/26 Python
python with (as)语句实例详解
2020/02/04 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
财务会计应届生求职信
2013/11/24 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
面试自我评价范文
2014/09/17 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
工作简历的自我评价
2019/05/16 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis