[angularjs] 링크 vs 컴파일 vs 컨트롤러

A를 directive사용하면 웹 구성 요소를 작성하기 위해 HTML 어휘를 선언적 방식으로 확장 할 수 있습니다. 이 ng-app속성은 지시문이므로 ng-controller모든 ng- prefixed attributes. 지침이 될 수 있습니다 attributes, tags심지어 나 class names, comments.

지시문이 생성되는 방법 ( compilation및 instantiation)

컴파일 : 우리는 compile함수가 manipulate렌더링되기 전에 DOM 을 사용하고 함수를 반환 할 link것입니다 (우리를 위해 링크를 처리 할 것입니다). 또한 instances이 지시문의 모든 부분과 공유해야하는 모든 메소드를 배치 할 수 있습니다 .

link : 이 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함수는 preand post링크 함수를 반환합니다 . 사전 링크 함수에는 인스턴스 템플릿과의 범위가 controller있지만 템플릿은 범위에 바인딩되지 않았으며 여전히 포함 된 내용이 없습니다.

Postlink function은 post link가 마지막으로 실행되는 함수입니다. 지금은 transclusion완전하다 the template is linked to a scope, 그리고 view will update with data bound values after the next digest cycle. 이 link옵션은 post-link기능 설정 바로 가기 입니다.

controller : 지시어 컨트롤러는 다른 지시어 연결 / 컴파일 단계로 전달 될 수 있습니다. 인터-디렉티브 커뮤니케이션에 사용하기위한 수단으로 다른 디렉티브에 주입 될 수 있습니다.

필요한 지시문의 이름을 지정해야합니다. 동일한 지시문 또는 해당 부모에 바인드되어야합니다. 이름 앞에 접두사를 붙일 수 있습니다 :

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

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));
                }
            };
        }
    };
});

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