AngularJS学习笔记(四) 自定义指令

指令(directive)是啥？简单来说就是实现一定功能的XXX。。。之前一直用的ng-model，ng-click等等都是指令。当我有一个ng没提供的需求的时候，就可以自定义个指令。指令的好处显而易见，方便复用。

本文会以一个检查用户名是否重复的指令为例，说明自定义指令怎么写。这个指令是我琢磨着写的，只是一个例子，知识点不全是一定的，不过能用，嗯。。不过如果代码哪里写的有问题请指出。

先看代码

<button my-check>注册</button>

当然，这是属性风格的指令，还可以有标签风格，class，注释。。。

m1.directive("myCheck",["$rootScope",function($rootScope){
return{
restrict : 'A',
link:function(scope,element){
element[0].onclick=function(){
var data=$rootScope.info;
var name=scope.regText.name;
var pw=scope.regPassword.name;
console.log(name,pw);
if(name&&pw){
for(var i=0;i<data.length;i++){
if(data[i].name===name){
scope.state="用户名已经被占用";
return;
}
}
scope.state="注册成功";
data.push({"name":name,"password":pw});
console.log(data);
}
}
}
}

首先，directive方法的第一个参数是指令名，不过指令名有一点奇怪的就是在html和js中，写法是不一样的，这是比较令我困惑的地方。

然后第二个参数数组还是常见的依赖注入写法（这里我注入$rootScope的原因是用户信息都挂在$rootScope的一个属性上），然后直接return一个对象。

对象属性：restrict：“A”代表这个指令是个属性风格的指令

link：写一个函数，函数里是这个指令的逻辑。

值得提到的是，link函数的参数，它的参数有三个(我只用到了2个)

第一个是scope作用域，这个作用域默认是标签的父级作用域，就是标签在那个作用域下，scope就是那个$scope。当然你可以改作用域，这个以后再说。。

第二个存着DOM元素，比较诡异的是它是一个数组，并不是DOM本身，而是这个对象的第一个元素就是这个DOM对象

第三个属性我输出了下，我把对象输出了下。。



内容倒是挺熟，不过这个属性本身存在的意义是啥？又为啥要写成这样，再留个坑。。看来需要买本ng工具书了。。

下一节没想好写什么，拟定是看看服务方面有没有可写的。