本文實例講述了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>
新聞熱點
疑難解答
圖片精選
