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 相关文章推荐
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jquery选择器简述
Aug 31 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
详解vue-cli3使用
Aug 14 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Tensorflow 实现释放内存
2020/02/03 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
大学生入党思想汇报
2014/01/01 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
倡议书的格式写法
2015/04/28 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
vue elementUI批量上传文件
2022/04/26 Vue.js