利用Angular.js编写公共提示模块的方法教程

 更新时间:2017年05月28日 12:54:31   作者:zcty0701  
最近工作中会经常遇到一些公用提示,使用框架自带很多时候不方便所以便自己编写了一个公共提示模块,下面这篇文章主要介绍了利用Angular.js编写公共提示模块的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。

前言

在编写一些大型工程的时候,会经常遇到一些公用提示,使用框架自带很多时候不方便,于是我手写了一个,下面来看看详细的介绍:

效果图如下

方法如下

一、先在angular中注册一个模块

二、


注册一个模块 注入依赖

三、


返回不同的方法应对不同情况

四、


获取模板路径

五、


编写模板内容 和普通的页面一样调用使用angular服务

六、


      1. 开启http服务获取模板内容

      2.  重点注意 $template = $compile(template)(scope); 这句代码非常重要  用于激活模板内容转成angular能识别的html代码片段

      3.提示框消失时间 设置回调函数 $template.detach();用于模板消失

七、


设置html代码内的变量

      1.由于不在控制层 $scope对象无法获取不了值  所有需要用代替值  需要在使用时将$scope传入

八、使用方法如下


记得在控制器里面注入alertModel模块

九、使用效果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家脚本之家的支持。

相关文章

  • Angular2使用Angular-CLI快速搭建工程(二)

    Angular2使用Angular-CLI快速搭建工程(二)

    这篇文章主要介绍了Angular2使用Angular-CLI快速搭建工程(二),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • angular-cli修改端口号【angular2】

    angular-cli修改端口号【angular2】

    本篇文章主要介绍了angular2中angular-cli修改端口号的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • angularjs实现猜大小功能

    angularjs实现猜大小功能

    这篇文章主要为大家详细介绍了angularjs实现猜大小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 关于 angularJS的一些用法

    关于 angularJS的一些用法

    这篇文章主要介绍了关于 angularJS的一些用法的相关资料,需要的朋友可以参考下
    2017-11-11
  • 简述AngularJS的控制器的使用

    简述AngularJS的控制器的使用

    这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下
    2015-06-06
  • 浅析Angular2子模块以及异步加载

    浅析Angular2子模块以及异步加载

    本篇文章主要介绍了浅析Angular2子模块以及异步加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例

    AngularJS中directive指令使用之事件绑定与指令交互用法示例

    这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • Angular-Touch库用法示例

    Angular-Touch库用法示例

    这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angular父组件调用子组件的方法

    Angular父组件调用子组件的方法

    组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构.这篇文章主要介绍了Angular组件——父组件调用子组件方法,需要的朋友可以参考下
    2018-04-04
  • angular 服务随记小结

    angular 服务随记小结

    这篇文章主要介绍了angular 服务随记小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论