利用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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery默认校验规则整理
Mar 24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
详解React中的组件通信问题
Jul 31 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 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
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python如何调用百度识图api
2020/09/29 Python
python try...finally...的实现方法
2020/11/25 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
学生会主席竞聘书
2014/03/31 职场文书
实习报告评语
2014/04/26 职场文书
优秀员工演讲稿
2014/05/19 职场文书
一般纳税人申请报告
2015/05/18 职场文书
安全生产会议制度
2015/08/06 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技