利用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 相关文章推荐
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
通过实例了解Javascript柯里化流程
Mar 03 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
Yii调试SQL的常用方法
2014/07/09 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP7新特性
2021/03/09 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python判断设备是否联网的方法
2018/06/29 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python实现区域填充的示例代码
2021/02/03 Python
小松树教学反思
2014/02/11 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
小学教师师德承诺书
2014/05/23 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
个人工作保证书
2015/02/28 职场文书
教师求职信怎么写
2015/03/20 职场文书
公司联欢会主持词
2015/07/04 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书