唯品秀前端博客
当前位置: 前端开发 > Js前端框架 > Angular.js自定义指令-封装button-Loading效果

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

2017-04-01 分类:Js前端框架 作者:管理员 阅读(6534)

在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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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>
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <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>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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>
               <!-- trigger-loading自定义指令,默认没有设置参数 -->
               <button class="btn btn-primary" trigger-loading ng-init="content='重置'" value="重置"></button>
               <!-- 在使用过程中 我们可设置参数,ng-init="content='新值'",默认是刷新,value默认不设置情况下也是刷新-->
               <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>
<!-- 注:在自定义指令中,如果不是通过指令标签去使用那么设置replace:true是不能替换原本元素的,且模板中的事件也是无法去触发的 -->
<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>

在线展示

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
2

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 3 条评论 - Angular.js自定义指令-封装button-Loading效果

  1. 新用户450106 未知操作系统 未知浏览器

    你能听到声音吗?

  2. 小兼 未知操作系统 未知浏览器

    ,好好干小伙!

  3. 潇洒走一回 未知操作系统 未知浏览器

    这个可以有,厉害了

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 242 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 870 条
  • 链接总数: 14 个
  • 标签总数: 432 个
  • 建站时间: 1062 天
  • 注册用户: 3455 人
  • 访问总量: 8667392 次
  • 最近更新: 2019年11月11日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线