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中关于执行环境的杂谈
Aug 14 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
留言板翻页的实现详解
2006/10/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python数据结构之单链表详解
2017/09/12 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python之reload流程实例代码解析
2018/01/29 Python
python 自定义对象的打印方法
2019/01/12 Python
python实现大文件分割与合并
2019/07/22 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
签约仪式主持词
2014/03/19 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
整改通知书格式
2015/04/22 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python