AngularJS全局警告框实现方法示例
时间:2019-03-30
本文章向大家介绍AngularJS全局警告框实现方法示例,主要包括AngularJS全局警告框实现方法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
- Python黑帽编程2.5 函数
- 洛谷P1317 低洼地
- ZOJ 3594 Sexagenary Cycle
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- P1554 梦中的统计
- Word2Vec教程-Skip-Gram模型模型“伪”任务关于模型的更多细节隐藏层输出层
- React第三方组件6(状态管理之Mobx的使用②TodoList上)
- The 9th Zhejiang Provincial Collegiate Programming Contest
- P1789 【Mc生存】插火把
- FOJFOJ有奖月赛-2012年4月(校赛热身赛)-解题报告总结
- poj 1316 Self Numbers
- React第三方组件6(状态管理之Mobx的使用①简单使用)
- poj 1088 滑雪
- 八数码难题解法大全
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforces 722C(带权并查集+反向思维)
- codeforces 1144D(思维)
- 经典的SparkSQL/Hive-SQL/MySQL面试-练习题
- codeforces 1249E(dp)
- Redis-KV数据库Java连接以及Jedis包的使用
- codeforces 1203D1(暴力)
- codeforces 1366B(线段相交)
- 一文搞懂Python自动化测试框架
- codeforces 1005D(数学)
- JSP开发简单实例演示
- Linux笔记【003】| Linux系统目录结构与基本命令
- codeforces1322A(括号匹配)
- codeforces 1296D(贪心)
- codeforces 1399D
- JSP开发之JSTL介绍和使用