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

用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:Directive指令用法（完整版）

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

  2. 学习AngularJs:Directive指令用法

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

  3. AngularJs: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. Solr_全文检索引擎系统

    Solr介绍: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中. Solr ...

  2. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  3. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  4. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  5. 【原创分享·微信支付】 C# MVC 微信支付教程系列之公众号支付

    微信支付教程系列之公众号支付         今天,我们接着讲微信支付的系列教程,前面,我们讲了这个微信红包和扫码支付.现在,我们讲讲这个公众号支付.公众号支付的应用环境常见的用户通过公众号,然后再通 ...

  6. Linux设备管理（四）_从sysfs回到ktype

    sysfs是一个基于ramfs的文件系统,在2.6内核开始引入,用来导出内核对象(kernel object)的数据.属性到用户空间.与同样用于查看内核数据的proc不同,sysfs只关心具有层次结构 ...

  7. 【一起学OpenFoam】01 OpenFoam的优势

    CFD技术发展到今天,已经超过了大半个世纪了,已经涌现出非常多的CFD软件可供人们使用.通用商业CFD软件譬如Fluent.CFX.Star CCM+等在工业上得到了广泛的应用,另外一些专用的软件(如 ...

  8. AutoMapper使用中的问题

    指定值只会执行一次 public class MomanBaseProfile : Profile { public MomanBaseProfile() { CreateMap<Request ...

  9. v14.0\AspNet\Microsoft.Web.AspNet.Props 找不到

    错误 E:\Github\AutoMapper\src\AutoMapper\AutoMapper.CoreCLR.kproj : error  : 未找到导入的项目"C:\Program ...

  10. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...