directive <二>link.element

時間 2019-11-24

標籤 directive link.element 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";
           }
       }
    });

以上爲指令中的代碼javascript

<!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的代碼css

結果：html

1.結果是 length=1，能夠看出element是一個有部分jquery dom對象屬性的dom對象，且有數據特性；java

2.從結果能夠看出指向的是[test-dw]，從圖中能夠看出element[0]=<test-dw>,length=1,_proto_爲對象的內部原型（每一個對象都會在其內部初始化一個屬性，就是_proto_）jquery

3.從結果能夠看出 element[0]=<test-dw>angularjs

4.element[0].firstchild 爲div塊app

5.element[0].children("div")不是一個div的具體塊，它也和element同樣是一個具備一個部分jquery dom對象屬性的dom對象，且具備數據特性dom

6.element[0].children("div")[0]這個纔是到了具體的div塊（它和element[0].firstchild同樣，能夠對比下）函數

7.注意：結果和5不同，7是用原生的js寫的，因此內部原型不一樣。post

<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>