directive <二>link.element
angular.module("APP",[])
.directive("testDw",function () {
return{
restrict:"E",
scope:"=",
template: "<div class='a'><div class='b'> 123344</div></div>",
link:function (scope,element,attrs) {
console.log(element.length); //1
console.log(element); //2
console.log(element[0]); //3
console.log(element[0].firstChild); //4
console.log(element.children("div")); //5
console.log(element.children("div")[0]); //6
console.log(element[0].getElementsByClassName("a")); //7
element[0].getElementsByClassName("a")[0].style.backgroundColor="black";
element[0].firstChild.style.backgroundColor="red";
}
}
});
以上为指令中的代码
<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div><test-dw></test-dw></div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app3.js"></script>
</body>
</html>
以上为html的代码
结果：
1.结果是 length=1，可以看出element是一个有部分jquery dom对象属性的dom对象，且有数据特性；
2.从结果可以看出指向的是[test-dw]，从图中可以看出element[0]=<test-dw>,length=1,_proto_为对象的内部原型（每个对象都会在其内部初始化一个属性，就是_proto_）
3.从结果可以看出 element[0]=<test-dw>
4.element[0].firstchild 为div块
5.element[0].children("div")不是一个div的具体块，它也和element一样是一个具有一个部分jquery dom对象属性的dom对象，且具有数据特性
6.element[0].children("div")[0]这个才是到了具体的div块 （它和element[0].firstchild一样，可以对比下）
7.注意：结果和5不一样，7是用原生的js写的，所以内部原型不同。
<body >
<p>{{message}}</p><input ng-model="message" />
<div><test-dw></test-dw></div>
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<script type="text/javascript">
var appd = angular.module("APP",[])
.directive("testDw", function(){
return{
restrict:"A",
scope:true,
template:"<div><button>点击</button><div>{{message}}</div></div>",
//replace:true,
link:function(scope, element, attrs){
element.bind("click", function(){
scope.$apply(function(){
scope.message="这就对啦";
})
} )
}
}
})
</script>
</body>
哈哈！其实directive中有很多内容可讲，其后放几个链接，用的时候可以专研：
“link”属性的值是一个函数，在该函数中可以操控DOM元素对象，包括绑定元素的各类事件，定义事件触发时执行的内容，函数定义的代码如下：
link:function(scope,element,attrs){
...
}
其中
link:function(scope,element,attrs){
...
}
其中
scope参数表示指令所在的作用域，它的功能和页面中控制器注入的作用域是相同的，
element参数表示指令中的元素，
attrs表示指令元素的属性集合。
还有scope是return里面的不是link里面的：
还有scope是return里面的不是link里面的：
当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）
当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）
当为{}时候，没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）
还有scope的绑定策略： @ = &
以上详见：http://www.jb51.net/article/83051.htm
controller，link，compile有什么不同：
由结果可以看出来，controller先运行，compile后运行，link不运行。
由结果可以看出来，controller先运行，link后运行，link和compile不兼容。
以上详见：http://blog.51yip.com/jsjquery/1607.html
日后有实战例子;将贴下方
