<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/bootstrap.min.css" > <script src="https://www.jb51.net/jquery.min.js"></script> <script src="https://www.jb51.net/angular.js"></script> <script src="https://www.jb51.net/angular-animate.js"></script> <script src="https://www.jb51.net/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}}"> </msg-box> <h1>content</h1> <button type="button" ng-click="show()">success</button> <div ng-controller="controller"> <button type="button" ng-click="show()">info</button> </div> </body> </html>
<div role="alert" ng-if="content"> <button type="button" aria-label="Close" ng-click="close()"> <span aria-hidden="true">×</span> </button> {{content}} </div>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》