지시 어

 라벨
restrict = "ECMA"  여러 개 를 동시에 넣 을 수 있어 요.
template
template : ""; 템 플 릿 을 작성 합 니 다.이 템 플 릿 은 일반 버 전과 같 습 니 다.제한 이 없습니다.
기본 적 인 상황 에서 템 플 릿 은 append 에 현재 명령 요소 에 들 어 갑 니 다.
templateUrl
string 템 플 릿 대신 템 플 릿 주 소 를 사용 할 수도 있 습 니 다.명령 이 template 를 사용 하면 비동기 프로 그래 밍 이 됩 니 다.template 를 요청 할 때 angular 는 다른 element 명령 을 먼저 해석 합 니 다. 
replace
replace:true 는 템 플 릿 을 현재 명령 요 소 를 직접 바 꾸 는 것 을 표시 합 니 다.여기에 한 정 된 것 이 있 습 니 다.요 소 는 반드시 1 대 1 로 바 뀌 어야 합 니 다.쉽게 말 하면 템 플 릿 은 반드시 1 층 div 에 의 해 완성 되 어야 합 니 다.하위 층 만 있 고 형제 가 있 으 면 안 됩 니 다.
priority
priority : 100  하나의 number 를 놓 고 하나의 요소 에 명령 의 해석 순 서 를 설정 합 니 다.만약 두 명령 이 같다 면,angular 는 그것 이 먼저 실행 되 는 것 을 구분 하지 않 을 것 이다.(작은 대표 일수 록 우선,0 은 default)
특히 주의해 야 할 것 은 우리 가 한 element 에 여러 개의 명령 을 놓 았 을 때 약간의 제한 이 있 을 수 있다 는 것 이다.

Multiple directives requesting  isolated scope.//격 리 할 scope

여러 지시 어가 같은 이름 으로 컨트롤 러 를 게시 합 니 다.모 르 겠 습 니 다

Multiple directives declared with the  transclusion  option.//모 르 겠 어 요

Multiple directives attempting to define a  template  or  templateURL.//템 플 릿 을 가 진 명령 만 있 을 수 있 습 니 다

.
scope
scope:false|true|{@attr:'노드 속성 참조',=attr:'노드 속성 값 을 scope 속성 값 으로 참조',&attr:'노드 속성 값 을 함수 로 포장'} 
false 는 명령 이 있 는 controller 의$scope 를 직접 사용 합 니 다.
true 는 new$scope 계승 controller$scope 를 표시 합 니 다.
{..}은 new$scope 가 계승 되 지 않 지만@=&를 통 해 요소 의 태그 와 다 리 를 놓 을 수 있 습 니 다.태그 에 contrller$scope 의 속성 과 연결 할 수 있 습 니 다. 
여기 서 특히 계승 을 사용한다 면 명령 자체 의 scope 는 새 것 입 니 다.격 리 scope 를 사용한다 면 명령 자체 의 scope 는 새 것 이 아니 라 명령 템 플 릿 의 scope 가 새 것 입 니 다.(여러분 이 직접 놀아 보 세 요^^)
 
그럼@=&의 차이 점 과 용법 을 살 펴 보 겠 습 니 다.
장면 은 하나의 ctrl 과 하나의 dir 이다. 
만약 우리 가 단 방향 바 인 딩 을 하고 싶다 면,즉 ctrl 은 dir 에 값 을 전달 한 다음 에 ctrl 한 측의 값 만 dir 에 동기 화 할 수 있 습 니 다. "@"을 사용 합 니 다.
만약 우리 가 양 방향 바 인 딩 을 하고 싶다 면,dir 의 값 도 ctrl 에 동기 화 할 수 있 습 니 다.우 리 는"="을 사용 합 니 다.
만약 우리 가 전하 고 싶 은 것 이 방법 이 라면,우 리 는"&"를 사용한다. 
주의:"&"도 단 방향 으로 연결 되 어 있 습 니 다.만약 동태 적 인 방법 을 입 으 려 면 우 리 는'='방법 을 값 에 맞 게 전달 해도 된다.
　　　  또한 추적 속성 에 의존 하 는 것 에 대해 서도 우 리 는 그것들 을 방법 으로 보고'&'를 사용 할 수 있다.
초보 자:'@'을 쓸 수 있 는 곳 에'='을 쓸 수 있다 고 생각 하지 마 세 요.이 건 잘못된 개념 입 니 다.많은 구 덩이 를 만 날 수 있 습 니 다.
아래 에서 우 리 는 약간의 차이 점 을 지적 하 였 으 니 주의해 야 한다. 

<mydir single-name="{{singleName}}" //@     {{     }} ,     {{}}      ，           。

       double-name="doubleName"  //=        

       click="click()"> "&"        ()

</mydir>

scope: {

    singleName: "@",

    doubleName: "=",                   

    click: "&"

},
// link   
log(attr.singleName); //   @    "keatkaet1" <-     ,    =    "doubleName" <-      ,    &     "click()" <-    ()

 
terminal
terminal:true 는 하나의 요소 에서 priority 가 이 명령 보다 큰 명령 은 처리 되 지 않 을 것 임 을 나타 낸다.
 
transclude
ng-transclude 를 사용 하면 scope 를 자동 으로 만 들 고"parent scope"를 계승 할 수 있 습 니 다.
칸 세트 명령 을 할 때,예 를 들 어 ctrlA 에 b 명령 안에 c 명령 이 있 습 니 다.b 템 플 릿 에서 우리 ng-transclude 가 c 가 되면 c 의$scope 는 자동 으로 새로운 것 을 만 들 고 A 를 계승 합 니 다.B 가 아 닙 니 다!B-C 는 sibling$scope 의 관계 입 니 다.
이러한 장점 은 명령 B 가 격 리 scope 라면 우리 의 C 명령 은 A$scope 내용 에 접근 할 수 있 는 방법 이 있다 는 것 이다.
이 경우 ng-transclude 만 할 수 있 습 니 다.그러면 우리 가 원 하지 않 고 C 가 B 를 계승 하려 면 우 리 는 스스로 my-transclude 를 쓸 수 있 습 니 다.link 에서 transludefn 을 호출 하여 실현 하면 됩 니 다.
transclude : true | "element"
트 루 의 상황 을 먼저 말씀 드 리 겠 습 니 다. 

 <myelem2>

　　　<div>123</div> <%--   ，         cut     --%>

 </myelem2>



         directive("myelem2", function () {

            return {    

                restrict: "E",

                link: function (scope, element, attrs, controllers) {

                    alert("myelem2");

                },

                transclude: true,

                template: '<div ng-transclude></div>', //              ng-transclude,        cut     

                replace : true 

            }

        })

"element"는 모든 명령 요 소 를 잘라 내 는 것 을 의미 하기 때문에 replace=false 를 설정 하면 아무것도 나타 나 지 않 습 니 다.

                link: function (scope, iElement, iAttrs, controller, transcludeFn) { //   "element"，    transcludeFn
                    //     for loop   transcludeFn ，  clone    

                    transcludeFn(scope, function (clone) {  //  scope,                  

                        clone.css('background-color', 'yellow'); //   clone angular   clone     

                        iElement.after(clone);

                    })

                    alert("myelem2");

                },

ng-repeat 를 참고 하 세 요.컴 파일 이 아 닌 링크 로 순환 클 라 이언 트 를 만 듭 니 다.그래서 컴 파일 이 어떤 장면 에 적합 한 지 잘 모 르 겠 습 니 다. 
 
require 와 controller
이 두 가 지 는 가 까 우 니 같이 소개 합 시다.
많은 경우 에 우 리 는 다 중 명령 으로 플러그 인 을 만 들 것 이다.
예 를 들 면: 
　　　　　　　　
그러면 서로 소통 을 하려 면 require 와 contrller 를 사용 해서 완성 할 수 있 습 니 다. 

        directive("myelem1", function () {

            return {

                restrict: "E",

                link: function (scope, iElement, iAttrs, controller, transcludeFn) {

            

                },

                template: '<div ng-transclude></div>', 

                replace: true,

                transclude: true,

                scope: true,                

                controller: function ($scope) {  

                    this.name = function () { //      

                        alert("name");

                    }

                },

                //name: "myelem1Ctrl" //      ，            

            }

        }).

하나의 명령 에 controller 와 name 을 쓰 십시오.(name 을 쓰 지 않 으 면 자동 으로 명령 의 이름 으로 대 체 됩 니 다.) 
그러면 이 명령 은 하위 층 과 같은 층(같은 층 은 next prev elem 명령 포함)의 명령 에 의 해 require 될 수 있 습 니 다. 
여기 controller 는 의존 주입 으로 링크 컴 플 리 와 다 릅 니 다. 
일반적으로 우 리 는 이 controller 도 service 나 대외 적 으로 개 방 된 인터페이스 로 본다.
다른 명령 은 controller.somefn 을 통 해 우리 의 scope 를 조작 합 니 다.

        directive("myelem3", function () {

             return {

                 restrict: "E",

                 link: function (scope, iElement, iAttrs, controllers, transcludeFn) {

                     controllers[0].name();

                     controllers[1].name();

                 },

                 template: '<div>myelem3</div>',

                 replace: true,

                 require: ["?^myelem1","?^myelem2"], //      ，        controller,      controller 

             }

         })

require 는 array 일 수 있 습 니까?대표 님 이 찾 지 못 하면 undefined 로 돌아 갑 니 다.^상층(다 층)처럼 controller 를 찾 습 니 다.기본 값 은 같은 층 element 에서 만 다른 명령 을 찾 습 니 다.
require 는 명령 어 에 만 접근 할 수 있 는 controller 입 니 다.link 함수 에서 저 희 는 controllers 를 사용 합 니 다. 
또 다른 예 가 있다.

                    controller("ctrl", ["$scope", function ($scope) {

                        $scope.name = "keatkeat"; 

                        this.xyz = "ggc"; 

                    }]).

                    directive("dir1", [function () {

                        return {

                            restrict: "E",

                            controller: "ctrl",

                            name: "ctrl123",

                            link: function (scope) {

                                console.log(scope.name);

                            }

                        }

                    }]);

명령 의 ctrl 은 string 을 기록 합 니 다.contrller 를 찾 습 니 다.name 을 통 해 이름 을 바 꿀 수 있 지만 일반적으로 우 리 는 이렇게 하지 않 고 헷 갈 리 기 쉽 습 니 다.
note :  명령 어 쓰기 controller 는 자동 으로 scope 를 추가 하지 않 습 니 다.scope:true|{}만 쓸 수 있 습 니 다.
 
 
copile 과 link
나 는 copile 과 link 에 대해 수박 겉 핥 기 일 뿐이다. 
angular 는 copile 등 모든 명령 을 먼저 실행 하고 링크 를 실행 합 니 다.copile 을 실행 할 때 DOM 만 조작 하고 scope 와 관련 되 지 않 습 니 다.copile 함 수 는 scope 에 접근 할 수 없습니다.

function compile(tElement, tAttrs, transclude) { ... }



function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }

이 두 함수 의 매개 변 수 는 모두 주입 에 의존 하 는 것 이 아니다. 
transclude 는 하나의 방법 으로 clone 위 에서 소개 한 것 을 실현 할 수 있 습 니 다. 
일반적 copile 은 링크 함수 나 pre,post 방법 이 있 는 대상 을 되 돌려 야 합 니 다. 
한 노드 에 여러 개의 명령 이 있 을 때 angular 는 모든 prelink 를 완성 한 후에 야 post link 를 실행 합 니 다.이것 은 우리 가 마지막 고비 에 여러 명령 사이 에서 pre link 를 실행 할 수 있 도록 합 니 다.
 
요약: 
지령 은 두 가지 포인트 가 있다 고 생각 합 니 다.
하 나 는 template 의 구조 입 니 다.중요 한 것 은$copile 의 과정 과 transclude 의 용법 을 이해 하 는 것 입 니 다.ng-repeat 는 비교적 복잡 한 예 이 므 로 참고 할 수 있 습 니 다.
둘째,명령 간 의 통신 입 니 다.scope,require,controller 를 이해 해 야 합 니 다.폼 컨트롤 을 할 때 ngModel controller||ngform controller 와 자주 접촉 합 니 다.
 
외부 전송: 
transclude=true 를 사용 할 때,우리 의 copile:function(elem,attrs,link)의 세 번 째 매개 변 수 는 이 명령 의$copile(elem.innerHTML),되 돌아 오 는 link 함수 입 니 다.