directive <二>link.element

angularjs1.x的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){
...
}
其中
scope参数表示指令所在的作用域，它的功能和页面中控制器注入的作用域是相同的，
element参数表示指令中的元素，
attrs表示指令元素的属性集合。
还有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
 
日后有实战例子;将贴下方

 

 

 

posted on 2017-08-24 11:55  技术V类  阅读(128)  评论(0)    收藏  举报

导航