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

用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. 0.Win8.1，Win10，Windows Server 2012 安装 Net Framework 3.5

    后期会在博客首发更新:http://dnt.dkill.net 网站部署之~Windows Server | 本地部署:http://www.cnblogs.com/dunitian/p/482280 ...

  2. Dreamweaver 扩展开发：C-level extensibility and the JavaScript interpreter

    The C code in your library must interact with the Dreamweaver JavaScript interpreter at the followin ...

  3. 学习ASP.NET Core,怎能不了解请求处理管道[2]: 服务器在管道中的“龙头”地位

    ASP.NET Core管道由注册的服务器和一系列中间件构成.我们在上一篇中深入剖析了中间件,现在我们来了解一下服务器.服务器是ASP .NET Core管道的第一个节点,它负责完整请求的监听和接收, ...

  4. javascript函数

    array.sort(function(a, b){ return a -b ; } )   把数组 array 按照从小到大排序. [11, 22, 586, 10, -58, 86].sort(f ...

  5. ASP.NET Core Loves JavaScript

    前言 在 ASP.NET 团队的 Github 的主页上,有这样一个开源项目叫:"JavaScriptsServices",那么 什么是 JavaScriptsServices 呢 ...

  6. Linux.NET学习手记（6）

    各位读者大家好,好长一段时间没有更新文章了,自从参加工作之后,每天等待去做的工作没完没了,个人的时间也变得奢侈起来,今后要尽量从中脱身,抽更多的时间来完成自己想做的事情(希望如此). 言归正传,上一回 ...

  7. 如何安装并简单的使用OwinHost——Katana

    微软OWIN的提出必然会引起一场风暴,而我们作为C#阵营中一份子,自然免不了会卷入其中.OWIN是什么东西,我在这里就不解析了,还不知道是OWIN是什么的读者请打开浏览器,然后搜索即可,中文的英文的应 ...

  8. 从零开始，DIY一个jQuery（3）

    在前两章,为了方便调试,我们写了一个非常简单的 jQuery.fn.init 方法: jQuery.fn.init = function (selector, context, root) { if ...

  9. 2016年我们重新思考移动互联网创业的风险, 微信还是APP？

    感觉这两年前端开发又火起来了,很多做内容创业和做微电商创业的人,往往都选择了运营微信号.对于做纯技术开发的人来说,一般是看不上微信号的,感觉没什么技术含量,或者说没什么技术壁垒.也有另一批人观点相反的 ...

  10. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...