步入angularjs directive（指令）--点击按钮加入loading状态

时间：2022-05-26 23:15:18

今天我终于鼓起勇气写自己的博客了，激动与害怕并存，希望大家能多多批评指导，如果能够帮助大家，也希望大家点个赞！！

用angularjs 工作也有段时间了，总体感觉最有挑战性的还是指令，因为没有指令的angularjs 就是只有骨头的框架，虽然有很多第三方指令，如：angular Bootstrap，ng-table等，但是根据界面设计的需求，他们远远不能满足，怎么办？？答案只有自己写了（也可以google，但是为了某个小功能，引入一个很大的文件，我是不提倡的。如果老板想让你时不时的改改，我估计你会崩溃的，是不是有想辞职的想法，为了让工作有意义和提高自己的水平，还是在时间充足的情况下自己写吧！），那么现在让我们开始吧！

今天先开始一个入门级的指令：按钮点击，加入loading，阻止再次点击（这在提交表单，ajax请求数据时非常有用）；

      自己小试牛刀，写了一个（虽然google 很多）。

      

 <!DOCTYPE html>

 <html ng-app="myApp">

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <link href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

     <script src="../../bower_components/angular/angular.js"></script>

 </head>

 <body ng-controller="myCtrl">

 <button class="btn btn-primary" btn-loading-text="loading" trigger-loading="beginLoading" ng-click="toggleLoad()">load</button>

 <button class="btn btn-default" ng-click="toggleLoad()">切换按钮状态</button>

 </body>

 <script>

     angular.module('myDirectives',[])

             .directive('triggerLoading',function(){

                 return {

                     restrict:'A',

                     link:function(scope,element,attr){

                         scope.prevText=element.text();

                         scope.$watch(function(){

                             return scope.$eval(attr.triggerLoading);

                         },function(value){

                             if(angular.isDefined(value)){

                                 //element.toggleClass('disabled',value);

                                 value?element.attr('disabled',true):element.removeAttr('disabled');

                                 element.text((value?attr.btnLoadingText:scope.prevText));

                             }

                         });

                     }

                 }

             });

             angular.module('myApp',['myDirectives'])

             .controller('myCtrl',['$scope',function($scope){

                 $scope.toggleLoad=function(){

                     $scope.beginLoading=!$scope.beginLoading;

                 };

             }]);

 </script>

 </html>

大家可以复制运行一下，提示：需要修改引入文件的路径。

这个指令功能很简单只是点击加入loading状态，如何不屑与这个功能，那就别往下看了，直接点赞吧，谢谢！

     指令这个东西，格式需要记住。

     下次首先讲讲".directive()"，谢谢关注！

步入angularjs directive（指令）--点击按钮加入loading状态的更多相关文章

  1. 学习AngularJs&colon;Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  2. 学习AngularJs&colon;Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  3. AngularJs&colon;Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  4. 步入angularjs directive（指令）--准备工作熟悉hasOwnProperty

    在讲解directive之前,先做一下准备工作,为何要这样呢? 因为我们不是简单的说说directive怎么用,还要知道为什么这么用!(今天我们先磨磨刀!). 首先我们讲讲js 基础的知识--hasO ...

  5. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

  6. 微信小程序点击按钮，修改状态

    WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap ...

  7. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  8. 【angularJS】Directive指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...

  9. angularJS directive详解（自定义指令）

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...

随机推荐

  1. JavaScript之bind&comma;call&comma;apply

    参考: http://rangercyh.blog.51cto.com/1444712/1615809 function foo(a,b) { this.x = this.x + a + b; } / ...

  2. 【iCore3 双核心板&lowbar;FPGA】实验二十六：SDRAM读写测试实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1c1VRibY iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  3. PAT &lpar;Advanced Level&rpar; Practise：1008&period; Elevator

    [题目链接] The highest building in our city has only one elevator. A request list is made up with N posi ...

  4. activiti自定义流程之自定义表单（二）：创建表单

    注:环境配置:activiti自定义流程之自定义表单(一):环境配置 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进 ...

  5. Mongo 备份 还原

    表还原 mongorestore --collection Inquiry0315 -d Estate --drop --dir D:/backup/20150731/Estate/Inquiry.b ...

  6. TCP&sol;IP协议原理与应用笔记04：子网掩码

    1. 子网掩码 是IP 参照物:分网段用的! 比如 192.168.0.1 和192.168.0.2(1).子网掩码为 255.255.255.0那么192.168.0.X 在同一个网段,能互相访问. ...

  7. 17&period;1&period;1&period;2 Setting the Replication Slave Configuration

    17.1.1.2 Setting the Replication Slave Configuration 在一个复制slave, 你必须创建一个唯一的server ID,如果这个没有做,slave设置 ...

  8. C&num;中 Thread，Task，Async&sol;Await，IAsyncResult 的那些事儿！

    说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部 ...

  9. 锋利的jQuery事件

    一:事件 1.鼠标事件 (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. ...

  10. 搭建ssr服务器

    搭建ssr服务器 首先,先说一下,为什么这么久没写博客. 一方面,最近在搭建自己的服务器.挺忙的. 另一方面,写了许多有关服务器构建,网站构建的word.但没有润色,所以打算等自己服务器做好了整理一下 ...

相关文章