AngularJS directive_AngularJS에서 반환된 객체 속성에 대한 자세한 설명

앞서 작성 : 지시문 부분이 Anglejs에서 최우선 사항이기 때문에 여러 장에 걸쳐서 설명하겠습니다. 이 장에서는 주로

지시어에 의해 반환된 객체의 더 간단한 속성을 설명합니다.

Directive()는angularjs에서 명령을 정의하는 데 사용됩니다. 이 메서드는 name(명령어 이름), Factory_function(이 함수는 명령의 모든 동작을 정의하고 객체를 반환함)이라는 두 가지 매개 변수를 받습니다.

밤나무:

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

반환된 개체에는 다음 속성과 메서드가 포함되어 있습니다.

1: 제한: 문자열

이 속성은 DOM에서 myDirective 지시어가 선언되는 형식(즉, HTML에서 사용해야 하는 위치)을 설명하는 데 사용됩니다.
이 속성의 선택적 값은 E(요소), A(속성, 기본값), C(클래스 이름), M(설명)이며 단독으로 또는 조합하여 사용할 수 있습니다
나는 다음과 같은 말을 본 적이 있습니다. 즉, 명령이 다른 요소, 속성 등에 의존하지 않고 일련의 작업을 독립적으로 완료할 수 있는 독립적인 명령 기능을 사용자 정의하려면 원하는 경우 명령을 요소로 정의하십시오. 이 명령을 사용하려면 기존 지시어의 기능을 확장하려면 해당 지시어를 속성으로 정의하세요. 이런 이해가 타당한지는 모르겠지만, 참고로 삼을 수 있는 좋은 선택 방법의 기준이기는 합니다

2: 우선순위: 숫자

이 속성은 명령어의 우선순위를 정의하는 데 사용됩니다(기본값은 0, ngRepeat는 모든 내장 명령어 중 가장 높은 우선순위를 가지며, 우선순위가 더 높은 명령어가 먼저 실행됩니다).

3: 터미널: 부울

이 속성은 우선순위 속성과 관련되어 있으며 현재 요소에서 이 명령어보다 낮은 우선순위의 명령어 실행을 중지할지 여부를 결정하는 데 사용되지만 여전히 동일한 우선순위가 실행됩니다.
밤나무:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

myDirective1 지시어가 정의되지 않은 경우 브라우저는 hello world를 표시하지만 myDirective1 지시어를 추가하고 우선 순위를 myDirective보다 높게 설정하고 myDirective1에서 터미널 속성을 true로 설정하면 실행이 중지됩니다. myDirective 지시어.

4: 템플릿: 문자열/함수

이 속성은 템플릿을 정의합니다. (즉, html 파일에서 이 명령을 사용하는 부분이 템플릿의 내용을 대체하므로 템플릿은 주로 html 형식입니다.)
속성은 HTML 텍스트 조각과 템플릿 문자열을 반환하는 함수의 두 가지 형태로 제공되며, 함수는 tElement, tAttrs

라는 두 가지 매개변수를 받습니다.

5: templateUrl: 문자열/함수

템플릿 콘텐츠가 많은 경우 템플릿에 직접 중첩하면 중복된 것으로 나타납니다. 이 경우 템플릿 코드를 별도의 파일로 가져와야 합니다.
속성은 외부 html 파일의 경로를 나타내는 문자열과 외부 html 파일에 대한 경로 문자열을 반환하는 함수라는 두 가지 형태로 제공됩니다. 이 함수는 tElement, tAttrs
라는 두 가지 매개변수를 받습니다.

6: 바꾸기: 부울

이 속성의 기본값은 false입니다. 이는 템플릿이 이 지시문을 호출하는 요소에 하위 요소로 삽입될지 아니면 이 지시문을 호출하는 요소를 덮어쓰고 교체할지 여부를 나타냅니다.
밤나무:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

repalce가 false인 경우 브라우저 소스 코드는 b5164c6eb4c755b3ed092f376e3665a3dc6dce4a544fdca2df29d5ac0ea9906bhello world16b28748ea4df4d9c2150843fecfba68adbb35bdcb0fb2fe4e0d48096f28053d
로 렌더링됩니다. true이면 dc6dce4a544fdca2df29d5ac0ea9906bhello world16b28748ea4df4d9c2150843fecfba68

로 표시됩니다.

7: transclude: 부울

밤나무:

<!-- index.html -->
<div my-directive>world</div>

이 예처럼 명령어 안에 콘텐츠가 있으면 일반적으로 템플릿이 콘텐츠를 직접 덮어쓰고 교체하지만 이제는 그대로 유지하고 싶은데 여기서 transclude가 유용합니다.

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

위의 js 코드는 html 파일 지시문에 포함된 세계를 템플릿의 스팬 요소에 포함합니다. 스팬 요소는 ng-transclude 내장 지시어 속성을 추가합니다(매우 중요함).
간단히 말해서, 이 속성의 목적은 Anglejs 컴파일러에게 DOM 요소에서 가져온 콘텐츠를 ng-transclude 지시문이 있는 위치에 배치하도록 지시하는 것입니다.
이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다.