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

用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. App开发：模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  2. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  3. .NET Core系列 ： 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  4. 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)

    前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 【开源】.Net 分布式服务中心

    分布式服务中心 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ServiceCenter 当垂直应用越来越多,应用之间交互不可避免,将 ...

  7. RabbitMq应用一的补充（RabbitMQ的应用场景）

    直接进入正题. 一.异步处理 场景:发送手机验证码,邮件 传统古老处理方式如下图 这个流程,全部在主线程完成,注册->入库->发送邮件->发送短信,由于都在主线程,所以要等待每一步完 ...

  8. WebGIS中等值线前端生成绘制简析

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插 ...

  9. 面向对象相关知识点xmind

  10. Android开发学习—— Fragment

    #Fragment* 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容* 生命周期方法跟Activity一致,可以理解把其为就是一个Activity* 定义布局文件作 ...