使用AngularJS怎么实现一个全局警告框-创新互联
今天就跟大家聊聊有关使用AngularJS怎么实现一个全局警告框，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联-专业网站定制、快速模板网站建设、高性价比麻山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式麻山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖麻山地区。费用合理售后完善，10余年实体公司更值得信赖。
具体如下：
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 = '';
}
};
});
.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;
}
content
success
info
×
{{content}}
看完上述内容，你们对使用AngularJS怎么实现一个全局警告框有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联网站建设公司行业资讯频道，感谢大家的支持。
