利用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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现简单全选框
Sep 13 jQuery
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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php筛选不存在的图片资源
2015/04/28 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
利用python批量检查网站的可用性
2016/09/09 Python
python实现发送邮件及附件功能
2021/03/02 Python
python实现输入数字的连续加减方法
2018/06/22 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
发展部经理职责规定
2014/02/22 职场文书
人资专员岗位职责
2014/04/04 职场文书
软环境建设心得体会
2014/09/09 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript