700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > angular 指令封装弹出框效果

angular 指令封装弹出框效果

时间:2020-04-08 21:29:28

相关推荐

angular  指令封装弹出框效果

就直接用bs的警告框啦~,Duang~

功能

可以设置message和type,type就是bs内置的几种颜色

默认提示3秒框自动关闭,或者点击x号关闭

代码

模板

<div class="alert alert-{{type || 'info'}}" ng-show="message"> <button type="button" class="close" ng-click="hideAlert()"> <span class="glyphicon glyphicon-remove"></span> </button> {{message}} </div>

指令

/*** 提示框*/commonToolDirectives.directive('alertBar',[function(){ return { restrict: 'EA', templateUrl: 'src/common/views/alertBar.html', scope : { message : "=", type : "=" }, link: function(scope, element, attrs){ scope.hideAlert = function() { scope.message = null; scope.type = null; }; } }; }]);

服务

/*** 提示框数据*/commonServices.factory('TipService', ['$timeout', function($timeout) { return { message : null, type : null, setMessage : function(msg,type){ this.message = msg; this.type = type; //提示框显示最多3秒消失 var _self = this; $timeout(function(){ _self.clear(); },3000); }, clear : function(){ this.message = null; this.type = null; } }; }]);

用法

因为是全局提示,所以就只有一个,在index.html中添加:

<!--全局提示框--><alert-bar class="alert_bar" message="tipService.message" type="tipService.type"></alert-bar>

同时保证他的z-index最高

然后因为需要在页面上直接访问tipService,需要在最外层controller(如果没有可以直接绑定到$rootScope)中绑定:

//提示信息服务$scope.tipService = TipService;

调用的时候在c中直接设置message和type就可以了

TipService.setMessage('登录成功','success');

当然从上面的模板代码可以看到,如果不传第二个参数,type默认是info,也就是那个蓝色的

效果

我的效果就是这样啦~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。