AngularJS全局警告框实现方法示例
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了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('suess'); } }]); 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 : '', suess : function(content) { this.tmpl(content, 'suess') }, 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%; : 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()">suess</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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程