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

2024-02-23 15:16:03 192

varmyapp=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=''; } }; }); .msg-box{ z-index:666; position:absolute; width:100%; top:5px; } .msg.ng-enter{ transition:2slinearall; opacity:0.3; } .msg.ng-enter-active{ opacity:1; } .msg.ng-leave{ transition:2slinearall; opacity:1; } .msg.ng-leave-active{ opacity:0; }

content

success

info

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

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

content

热门推荐

随机推荐