步入angularjs directive（指令）--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了，激动与害怕并存，希望大家能多多批评指导，如果能够帮助大家，也希望大家点个赞！！
用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状态的更多相关文章
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- 步入angularjs directive（指令）--准备工作熟悉hasOwnProperty
在讲解directive之前,先做一下准备工作,为何要这样呢? 因为我们不是简单的说说directive怎么用,还要知道为什么这么用!(今天我们先磨磨刀!). 首先我们讲讲js 基础的知识--hasO ...
- AngularJS directive 指令相关记录
.... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...
- 微信小程序点击按钮，修改状态
WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- 【angularJS】Directive指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...
- angularJS directive详解（自定义指令）
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
随机推荐
- 2015 西雅图微软总部MVP峰会记录
2015 西雅图微软总部MVP峰会记录 今年决定参加微软MVP全球峰会,在出发之前本人就已经写这篇博客,希望将本次会议原汁原味奉献给大家 因为这次是本人第一次写会议记录,写得不好的地方希望各位园友见谅 ...
- LeetCode-3LongestSubstringWithoutRepeatingCharacters(C#)
# 题目 3. Longest Substring Without Repeating Characters Given a string, find the length of the longes ...
- Ubuntu 16.10 开启PHP错误提示
两个步骤: 修改php.ini配置文件中的error_reporting 和 display_errors两地方内容: sudo vim /etc/php/7.0/apache2/php.ini er ...
- Phoenix综述（史上最全Phoenix中文文档）
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...
- Node.js：path、url、querystring模块
Path模块 该模块提供了对文件或目录路径处理的方法,使用require('path')引用. 1.获取文件路径最后部分basename 使用basename(path[,ext])方法来获取路径的最 ...
- 通过VMware的PowerCLI配置集群内指定主机的vMotion功能
PowerCLI是VMware开发的基于微软(MSFT)的PowerShell的命令行管理vSphere的实现,因此在批量化操作方面CLI会减轻很多GUI环境下的繁琐重复劳作. 现有场景中有大量的物理 ...
- PHP获取客户端IP
/** * 获取客户端IP */ function getClientIp() { $ip = 'unknown'; $unknown = 'unknown'; if (isset($_SERVER[ ...
- .NET设计模式访问者模式
一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...
- Java类访问权限修饰符
一.概要 通过了解Java4种修饰符访问权限,能够进一步完善程序类,合理规划权限的范围,这样才能减少漏洞.提高安全性.具备表达力便于使用. 二.权限表 修饰符 同一个类 同一个包 不同包的子类 不同包 ...
- 【开发软件】 在Mac下配置php开发环境：Apache+php+MySql
本文地址 原文地址 本文提纲: 1. 启动Apache 2. 运行PHP 3. 配置Mysql 4. 使用PHPMyAdmin 5. 附录 有问题请先 看最后的附录 摘要: 系统OS X ...