利用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判断浏览器是否是IE的比较好的办法
May 08 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php除数取整示例
2014/04/24 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php经典算法集锦
2015/11/14 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python测试驱动开发实例
2014/10/08 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python自省及反射原理实例详解
2020/07/06 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
大学生先进事迹材料
2014/02/16 职场文书
体育教学随笔感言
2014/02/24 职场文书
三年级评语大全
2014/04/23 职场文书
云台山导游词
2015/02/03 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL