Angular.js自定义指令-封装button-Loading效果

作者：管理员 2017-04-01 10:36:43 分类：JavaScript 阅读（10725） 2

在Angular中，Directive，自定义指令的学习，可以更好的理解angular指令的原理，当angular的指令不能满足你的需求的时候，嘿嘿，你就可以来看看这篇文章，自定义自己的指令，可以满足你的各种需求的指令，文章中主要介绍指令定义的选项配置。
　　废话不多说，下面就直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>Angular.js-button-Loading效果</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://use.fontawesome.com/bef54180d6.js"></script>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
//Angular.js核心文件
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
//配合Angular.js插件，用于解析变量解析html
<style>
*{padding:0; margin:0; list-style: none;}
button{width:80px; height:34px; }
.btn-primary{background: green}
.header{width:400px; height:200px;position: fixed; top:0; left:0; bottom:0; right:0; margin: 200px auto 0; }
</style>
</head>
<body ng-controller="myCtrl">
<div class="header">
<button class="btn btn-primary" trigger-loading></button>

<button class="btn btn-primary" trigger-loading ng-init="content='重置'" value="重置"></button>

<button class="btn btn-primary" trigger-loading ng-init="content='提交'" value="提交"></button>
<button class="btn btn-primary" trigger-loading ng-init="content='上传'" value="上传"></button>
</div>
</body>

<script>
var m1 = angular.module('myDirectives',[])
.directive('triggerLoading',function(){
return {
restrict:'AEC',
/* restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。*/
//replace:true,//指令模板是否替换原有内容
scope:true,//独立作用域
// scope:{//是否独立每个指令作用域（不会受controller控制器影响）
// myVlue : '@aAttr',
// myText : '=bAttr',
// myFn : '&reset'
// },
controller : ['$scope',function($scope){
$scope.content = '刷新';
}],
link:function(scope,iEle,iAttrs){
iEle.bind('click', function(){
var Reset = iAttrs.$$element[0].value;//获取当前点击的value值
scope.$apply(function(){
scope.content = "加载中<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>"
})
iAttrs.$$element[0].disabled = true;//button开启禁止点击状态
setTimeout(function(){
iAttrs.$$element[0].disabled = false;
scope.$apply(function(){
if (Reset) {//判断用户是否设置重置value
scope.content = Reset;//将点击时候记录下来的value值赋值给指令模板
}else{
scope.content = "刷新";//如果没设置，Loading完后回到默认“刷新”
}
})
},1000);
})
},
template:"<span ng-bind-html='content'></span>"
}
});
angular.module('myApp',['myDirectives','ngSanitize'])
.controller('myCtrl',['$scope',function($scope){
}]);
</script>
</html>

在线展示

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(2) 打赏

标签：

上一篇：WordPress后台登陆提示错误：Cookies因预料之外的输出被阻止的解决办法

下一篇：wordpress主题显示年月日的计时代码。附代码详解

Angular.js自定义指令-封装button-Loading效果

相关推荐

共 2 条评论关于"Angular.js自定义指令-封装button-Loading效果"

点击取消