링크 대 컴파일 대 컨트롤러

링크 대 컴파일 대 컨트롤러

명령어를 만들 때 컴파일러, 링크 함수 또는 컨트롤러에 코드를 넣을 수 있습니다.

문서에서는 다음과 같이 설명합니다.

• 컴파일 및 링크 함수는 각 주기의 다른 단계에서 사용됩니다.
• 컨트롤러가 디렉티브 간에 공유됨

하지만, 저에게는 어떤 종류의 코드가 어디로 가야 하는지 명확하지 않습니다.

예: 컴파일할 때 함수를 만들어 스코프에 링크로 연결하거나 컨트롤러의 스코프에만 함수를 연결할 수 있습니까?

각 디렉티브가 자체 컨트롤러를 가질 수 있는 경우 디렉티브 간에 컨트롤러를 어떻게 공유합니까?컨트롤러가 실제로 공유되고 있습니까? 아니면 범위 속성뿐입니까?

컴파일:

이것은 Angular가 실제로 지시문을 컴파일하는 단계입니다.이 컴파일 함수는 지정된 지시어에 대한 각 참조에 대해 한 번만 호출됩니다.예를 들어, ng-repeat 디렉티브를 사용하고 있다고 가정하면, ng-repeat은 연결된 요소를 찾아 연결된 html 조각을 추출하고 템플릿 함수를 만들어야 합니다.

핸들바, 밑줄 템플릿 또는 이와 유사한 템플릿을 사용한 경우 템플릿 함수를 추출하기 위해 템플릿을 컴파일하는 것과 같습니다.이 템플릿 함수에 데이터를 전달하면 해당 함수의 반환 값은 데이터가 올바른 위치에 있는 html입니다.

컴파일 단계는 Angular에서 템플릿 함수를 반환하는 단계입니다.이 각진 템플릿 함수를 연결 함수라고 합니다.

연결 단계:

링크 단계는 링크 기능에 데이터($scope)를 첨부하는 단계이며 링크된 html을 반환해야 합니다.지시문은 이 HTML이 어디로 가는지 또는 무엇을 변경하는지도 지정하기 때문에 이미 이동할 수 있습니다.링크된 html, 즉 이미 데이터가 첨부된 html을 변경하려는 기능입니다.연결 함수에 코드를 쓰면 일반적으로 연결 후 함수입니다(기본값).연결 함수가 데이터를 템플릿과 연결한 후에 호출되는 일종의 콜백입니다.

컨트롤러:

컨트롤러는 특정 지시문 특정 논리를 입력하는 곳입니다.이 논리는 연결 함수에도 포함될 수 있지만, "공유 가능"으로 만들기 위해서는 해당 논리를 스코프에 배치해야 합니다.문제는 지시사항으로 범위를 훼손한다는 것입니다. 실제로는 예상하지 못했던 것이죠.그렇다면 두 명의 지침이 서로 대화를 나누고 서로 협력하기를 원한다면 대안은 무엇일까요?물론 이 모든 논리를 서비스에 적용한 다음 두 가지 지침을 모두 해당 서비스에 종속시킬 수 있지만, 이는 하나의 종속성만 더 가져올 뿐입니다.대안은 이 범위에 대한 컨트롤러를 제공하는 것입니다(일반적으로 범위를 분리합니다). 그런 다음 해당 지침이 다른 지침을 "요구"할 때 이 컨트롤러를 다른 지침에 주입합니다.예를 들어 angularjs.org 의 첫 번째 페이지에 있는 탭과 창을 참조하십시오.

저는 또한 O'Reily Angular가 무엇인지 덧붙이고 싶었습니다.Google 팀의 JS 북에는 다음과 같은 내용이 있습니다.

컨트롤러 - 지시사항 간 통신을 위한 API를 게시하는 컨트롤러를 만듭니다.대표적인 예가 Directive Communication입니다.

링크 - 결과 DOM 요소 인스턴스를 프로그래밍 방식으로 수정하고, 이벤트 수신기를 추가하고, 데이터 바인딩을 설정합니다.

컴파일 - ng-repeat에서 사용되는 것처럼 지시어 복사본 전반에 걸쳐 기능에 대한 DOM 템플릿을 프로그래밍 방식으로 수정합니다.컴파일 함수는 결과 요소 인스턴스를 수정하기 위해 링크 함수를 반환할 수도 있습니다.

A directive웹 구성 요소를 구성하기 위해 선언적인 방식으로 HTML 어휘를 확장할 수 있습니다. 그ng-app 입니다. 마찬가지입니다.ng-controller 그고모든것들리▁of▁the들.ng- prefixed attributes지시문은 다음과 같을 수 있습니다.attributes,tags아니 심지어는class names,comments.

탄생하는지 (지시어가어탄지는하생떻게▁(▁how지지▁direct는▁(ives)compilation그리고.instantiation)

컴파일:우리는 사용할 것입니다.compile양쪽에 모두 작용하는.manipulate을 반환합니다.link(우리를 위해 링크를 처리할) 함수.여기는 또한 모든 사람들과 공유해야 하는 모든 방법을 배치하는 곳입니다.instances이 지시의.

링크: 우리는 사용할 것입니다.link모든 수신기를 특정 DOM 요소(템플릿에서 복제됨)에 등록하고 페이지에 대한 바인딩을 설정하는 기능입니다.

에서 설정된 경우compile()기능은 한 번만 설정할 수 있습니다(종종 원하는 경우).에서 설정된 경우link()함수는 HTML 요소가 데이터에 바인딩될 때마다 설정됩니다. 물건.

<div ng-repeat="i in [0,1,2]">
    <simple>
        <div>Inner content</div>
    </simple>
</div>

app.directive("simple", function(){
   return {
     restrict: "EA",
     transclude:true,
     template:"<div>{{label}}<div ng-transclude></div></div>",        
     compile: function(element, attributes){  
     return {
             pre: function(scope, element, attributes, controller, transcludeFn){

             },
             post: function(scope, element, attributes, controller, transcludeFn){

             }
         }
     },
     controller: function($scope){

     }
   };
});

Compile함수는 다음을 반환합니다.pre그리고.post연결 함수.프리링크 함수에는 인스턴스 템플릿과 다음의 범위가 있습니다.controller그러나 템플릿은 범위에 구속되지 않으며 여전히 콘텐츠를 포함하지 않습니다.

Post링크 함수는 포스트 링크가 마지막으로 실행되는 함수입니다.이제 더transclusion완료되었습니다.the template is linked to a scope그리고view will update with data bound values after the next digest cycle.그link옵션은 설정을 위한 바로 가기일 뿐입니다.post-link기능.

컨트롤러:디렉티브 컨트롤러는 다른 디렉티브 링크/컴파일링 단계로 전달될 수 있습니다.그것은 지시 간 통신에 사용하기 위한 수단으로 다른 지시에 주입될 수 있습니다.

필요한 지시어의 이름을 지정해야 합니다. 지시어는 동일한 요소 또는 상위 요소에 바인딩되어야 합니다.이름 앞에 다음을 붙일 수 있습니다.

? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.

대괄호 사용[‘directive1′, ‘directive2′, ‘directive3′]다중 지시 제어기가 필요합니다.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('parentDirective', function() {
  return {
    restrict: 'E',
    template: '<child-directive></child-directive>',
    controller: function($scope, $element){
      this.variable = "Hi Vinothbabu"
    }
  }
});

app.directive('childDirective', function() {
  return {
    restrict:  'E',
    template: '<h1>I am child</h1>',
    replace: true,
    require: '^parentDirective',
    link: function($scope, $element, attr, parentDirectCtrl){
      //you now have access to parentDirectCtrl.variable
    }
  }
});

또한 (범위, 요소 및 특성에 모두 액세스할 수 있기 때문에) 컨트롤러 대 링크 기능을 사용해야 하는 좋은 이유는 사용 가능한 서비스나 종속성을 컨트롤러(및 임의의 순서로)로 전달할 수 있지만 링크 기능으로는 전달할 수 없기 때문입니다.다른 서명에 주목하십시오.

controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {...

대.

link: function(scope, element, attrs) {... //no services allowed

이것은 지침 단계를 이해하기 위한 좋은 샘플입니다. http://codepen.io/anon/pen/oXMdBQ?editors=101

var app = angular.module('myapp', [])

app.directive('slngStylePrelink', function() {
    return {
        scope: {
            drctvName: '@'
        },
        controller: function($scope) {
            console.log('controller for ', $scope.drctvName);
        },
        compile: function(element, attr) {
            console.log("compile for ", attr.name)
            return {
                post: function($scope, element, attr) {
                    console.log('post link for ', attr.name)
                },
                pre: function($scope, element, attr) {
                    $scope.element = element;
                    console.log('pre link for ', attr.name)
                        // from angular.js 1.4.1
                    function ngStyleWatchAction(newStyles, oldStyles) {
                        if (oldStyles && (newStyles !== oldStyles)) {
                            forEach(oldStyles, function(val, style) {
                                element.css(style, '');
                            });
                        }
                        if (newStyles) element.css(newStyles);
                    }

                    $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true);

                    // Run immediately, because the watcher's first run is async
                    ngStyleWatchAction($scope.$eval(attr.slngStylePrelink));
                }
            };
        }
    };
});

html

<body ng-app="myapp">
    <div slng-style-prelink="{height:'500px'}" drctv-name='parent' style="border:1px solid" name="parent">
        <div slng-style-prelink="{height:'50%'}" drctv-name='child' style="border:1px solid red" name='child'>
        </div>
    </div>
</body>

• 컴파일: 새 표현식 추가와 같이 지시문 템플릿을 수정해야 할 때 사용되며, 이 지시문 내에 다른 지시문을 추가합니다.
• 컨트롤러: $scope 데이터를 공유/공유해야 할 때 사용
• 링크: 이벤트 핸들러를 부착하거나 DOM을 조작해야 할 때 사용하는 기능입니다.

언급URL : https://stackoverflow.com/questions/15676614/link-vs-compile-vs-controller