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 相关文章推荐
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
js轮播图代码分享
Jul 14 Javascript
Highcharts学习之数据列
Aug 03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
JS图片懒加载的优点及实现原理
Jan 10 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实现WEB动态网页静态
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
js脚本实现数据去重
2014/11/27 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python如何为被装饰的函数保留元数据
2018/03/21 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Python request使用方法及问题总结
2020/04/26 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
幼儿园园长自我鉴定
2013/10/22 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
优秀广告词大全
2014/03/19 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
大学同学会活动方案
2014/08/20 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL