AngularJS全局警告框实现方法示例

2019-11-19 16:33:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：BootStrap 导航条实例代码

下一篇：Nodejs中使用captchapng模块生成图片验证码