唯品秀前端博客

在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>

在线展示

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

上一篇:

下一篇:

相关推荐

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

表情

最新评论

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

    ,好好干小伙!

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

    这个可以有,厉害了

  3. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏