About

关于angularjs的指令学习，小编看了imooc的视频然后翻墙到外面看文章（边看边Google翻译，好好学英语吧骚年们），然后回来写一个总结，写我看到的，写我听到的。

刚刚开始接触angular的时候，只觉得几句话就可以搞定一件事情，代替了之前一堆的AJAX的异步加载。AngularJS is perfect for Single Page Applications (SPAs).这个单页应用程序是什么，通常的说法是它通过避免页面刷新大大提高了网站的响应性，就像桌面应用，如果单页程序放到移动端就像是原生app一样的用户体验。

最开始第一代web是干啥都要去找服务器调资源，从服务器拼接好html通过response来返回静态页面。现在看来，都讲究把经常加载的数据置前，在效率和空间总要选一样的。后来呢，AJAX来了，大家都学会了异步加载，还记得是个XMLHttpRequest 对象，就可以取部分数据异步更新。之后，AngularJS仅需HTML，CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强MVC Web应用的性能。前端的料真的原来越来越腻害了呢。

AngularJS Directives

那么指令是什么东东呢，简单说，就是扩展html的一个新的属性。我们可以用定义好的指令完成我们的业务，也可以自定义的封装指令。指令就是一个简单的替换标签的过程，变换成html看得懂的内容。指令都带有一个ng-的前缀。先来个例子给你一个体会。

ng-app：标志着angularjs初始化

ng-init：应用程序数据初始化

ng-model：用来执行数据绑定到元素上面

<!DOCTYPE html>
<html><body><div ng-app="" ng-init="learn='Angular'"><p>Input something you want to learn:<input type="text" ng-model="learn"></p>
<p>You wrote: {{ learn}}</p></div></body><script src="js/angular-1.3.0.js"></script>
</html>

下面已ng-model为例让大家了解一下指令可以做什么。

Two-Way Binding

在上面的例子中我用到了ng-app，ng-init，ng-model 这样实现了一个简单的angular小呆萌。其中有一个强大的取值表达式：{{}}，通过ng-model="learn" 实现了数据的双向绑定。在修改input的值的同时， AngularJS 属性的值（learn）也将修改。

Validate User Input

还是这个ng-model指令，它可以对angular程序进行数据验证（number,e-mail,required）

<!DOCTYPE html>
<html><body><form ng-app="" name="myForm">Email:<input type="email" name="myAddress" ng-model="text"><span ng-show="myForm.myAddress.$error.email" >Not a valid e-mail address</span>
</form></body><script src="js/angular-1.3.0.js"></script>
</html>

Application Status

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)

<!DOCTYPE html>
<html><body><form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p></form></body><script src="js/angular-1.3.0.js"></script>
</html>

vaild：验证值是否满足标准

dirty：验证值是否发生变化

touched：验证是否获取焦点

CSS Classes

这个就很好理解了，可以根据上面的状态来设置css样式，标识着发生变化。

<!DOCTYPE html>
<html><style>
input.ng-invalid {background-color: lightblue;
}
</style>
<body><form ng-app="" name="myForm">Enter your name:<input name="myName" ng-model="myText" required>
</form><p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p></body><script src="js/angular-1.3.0.js"></script>
</html>

Create New Directives

看了这么多的小例子，自己写一个怎么样。写之前，你要知道指令声明的几种方式：

restrict	意义
E	Element name
A	Attribute
C	Class
M	Comment

想着我说过的，替换，这样实现一个简单的html的嵌套，相当于在主视图声明一个变量，在js文件里面替换掉主视图的声明。

<!DOCTYPE html>
<html ng-app="MyModule">
<head><meta charset="utf-8">
</head>
<body><hello></hello><div hello></div><div class="hello"></div>
</body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_Directive.js"></script>
</html>JS文件：
var MyModule=angular.module("MyModule",[]);
MyModule.directive("hello", function () {return {restrict: 'ACME',template: '<div>Hi everyone!</div>',replace: true}
});

Expand

给大家看一个综合的例子，里面用到了自定义指令，link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。还有ng-repeat来循环显示一个数组。

js文件：

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {return {restrict : 'EA',replace : true,transclude : true,template : '<div ng-transclude></div>',controller : function() {var expanders = [];this.gotOpened = function(selectedExpander) {angular.forEach(expanders, function(expander) {if (selectedExpander != expander) {expander.showMe = false;}});}this.addExpander = function(expander) {expanders.push(expander);}}}
});expModule.directive('expander', function() {return {restrict : 'EA',replace : true,transclude : true,require : '^?accordion',scope : {title : '=expanderTitle'},template : '<div>'+ '<div class="title" ng-click="toggle()">{{title}}</div>'+ '<div class="body" ng-show="showMe" ng-transclude></div>'+ '</div>',link : function(scope, element, attrs, accordionController) {scope.showMe = false;accordionController.addExpander(scope);scope.toggle = function toggle() {scope.showMe = !scope.showMe;accordionController.gotOpened(scope);}}}
});expModule.controller("SomeController",function($scope) {$scope.expanders = [{title : 'Click me to expand',text : 'Hi there folks, I am the content that was hidden but is now shown.'}, {title : 'Click this',text : 'I am even better text than you have seen previously'}, {title : 'Test',text : 'test'},{title:'hello world',text:'this is create by me'}];
});html文件：
<html ng-app="expanderModule"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script src="js/angular-1.3.0.js"></script><link rel="stylesheet" type="text/css" href="Accordion.css"/></head><body ng-controller='SomeController' ><accordion><expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>{{expander.text}}</expander></accordion></body><script src="Accordion.js"></script>
</html>

总结

1.指令是所有AngularJS应用最重要的部分，内置指令有63个。多多敲几个例子，你就会了解指令的概念了。

2.推荐大家去看看几个网站了解一下angularjs

http://www.w3schools.com/angular/default.asp

http://www.apjs.net/

AngularJS（1）——AngularJS指令机制相关推荐

AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------- ...
AngularJS 的自定义指令
这是一篇angularjs自定义指令的教程.就让我们来看看,如何在angularjs中自定义指令吧!我们将利用现有的guitar angularjs app,这在教程14: AngularJ表单验证 ...
使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
angularjs笔记,基本指令,字符串反转,过滤器
1. Angular指令 * Angular为HTML页面扩展的: 自定义标签属性或标签 * 与Angular的作用域对象(scope)交互,扩展页面的动态表现力 2. 常用指令(一) ...
关于Angularjs中自定义指令一些有价值的细节和技巧
作者:心叶时间:2018-04-22 10:58 一:自定义指令常用模板下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识: angular.module('yello ...
AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简 ...
angularJS在创建指令需要注意的问题(指令中使用ngRepeat)
现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...

AngularJS（1）——AngularJS指令机制