利用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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
详解package.json版本号规则
Aug 01 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
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序实现tab左右切换效果
2020/11/15 Javascript
puppeteer库入门初探
2019/01/09 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python加载自定义词典实例
2019/12/06 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
科长竞聘演讲稿
2014/05/16 职场文书
采购部长岗位职责
2014/06/13 职场文书
医院科室评语
2015/01/04 职场文书
英文感谢信范文
2015/01/21 职场文书
匿名信格式范文
2015/05/27 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python