AngularJS全局警告框实现方法示例


Posted in Javascript onMay 18, 2017

本文实例讲述了AngularJS全局警告框实现方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <script src="jquery.min.js"></script>
  <script src="angular.js"></script>
  <script src="angular-animate.js"></script>
  <script src="bootstrap.min.js"></script>
  <script type="text/javascript">
    var myapp = angular.module('myapp', ['ngAnimate']);
    myapp.controller('msgController', ['$scope', 'notificationService', function($scope, notificationService) {
      $scope.msg = notificationService;
      $scope.show = function() {
        notificationService.danger('success');
      }
    }]);
    myapp.controller('controller', ['$scope', 'notificationService', function($scope, notificationService) {
      $scope.show = function() {
        notificationService.info('info');
      }
    }]);
    myapp.directive('msgBox', function() {
      return {
        restrict : 'EA',
        scope : {
          content: '@',
          type: '@',
        },
        templateUrl : 'tmpl.html',
        link : function(scope, elem, attrs) {
          scope.close = function() {
            scope.content = '';
          };
        }
      };
    });
    myapp.factory('notificationService', function($timeout, $rootScope) {
      return {
        content : '',
        type : '',
        success : function(content) {
          this.tmpl(content, 'success')
        },
        info : function(content) {
          this.tmpl(content, 'info')
        },
        warning : function(content) {
          this.tmpl(content, 'warning')
        },
        danger : function(content) {
          this.tmpl(content, 'danger')
        },
        tmpl : function(content, type) {
          this.content = content;
          this.type = type;
          var _self = this;
          $timeout(function() {
            _self.clear();
          }, 5000);
        },
        clear : function() {
          this.content = '';
          this.type = '';
        }
      };
    });
  </script>
  <style type="text/css">
    .msg-box {
      z-index: 666;
      position: absolute;
      width: 100%;
      top: 5px;
    }
    .msg.ng-enter {
      transition: 2s linear all;
      opacity: 0.3;
    }
    .msg.ng-enter-active {
      opacity: 1;
    }
    .msg.ng-leave {
      transition: 2s linear all;
      opacity: 1;
    }
    .msg.ng-leave-active {
      opacity: 0;
    }
  </style>
 </head>
 <body ng-app="myapp" ng-controller="msgController">
   <msg-box content="{{msg.content}}" type="{{msg.type}}" class="msg-box">
   </msg-box>
   <h1>content</h1>
   <button type="button" class="btn btn-primary" ng-click="show()">success</button>
   <div ng-controller="controller">
    <button type="button" class="btn btn-primary" ng-click="show()">info</button>
   </div>
 </body>
</html>
<div class="alert alert-{{type || 'info'}} msg" role="alert" ng-if="content">
 <button type="button" class="close" aria-label="Close" ng-click="close()">
  <span aria-hidden="true">×</span>
 </button>
 {{content}}
</div>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javascript实现获取服务器时间
May 19 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
vue params、query传参使用详解
Sep 12 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
js图片预加载示例
2014/04/30 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue的for循环使用方法
2019/02/12 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
高中运动会入场词
2014/02/14 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Python超详细分步解析随机漫步
2022/03/17 Python