다양한 함수를 선언하는 방법?

컴파일, 컨트롤러, 프리 링크 및 포스트 링크

하나가 네 가지 기능을 모두 사용하는 경우 지시문은 다음 형식을 따릅니다.

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return {
                pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
                    // Pre-link code goes here
                },
                post: function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here
                }
            };
        }
    };  
});

compile은 pre-link 함수와 post-link 함수를 모두 포함하는 객체를 반환합니다. Angular lingo에서는 컴파일 함수가 템플릿 함수를 반환한다고 말합니다 .

컴파일, 컨트롤러 및 사후 링크

경우 pre-link필요하지 않습니다, 컴파일 기능은 단순히 대신 정의 오브젝트의 후 링크 기능을 반환과 같이 할 수 있습니다 :

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here                 
            };
        }
    };  
});

때로는 compile(post) link메소드가 정의 된 후 메소드 를 추가하려고합니다 . 이를 위해 다음을 사용할 수 있습니다.

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.

            return this.link;
        },
        link: function( scope, element, attributes, controller, transcludeFn ) {
            // Post-link code goes here
        }

    };  
});

컨트롤러 및 사후 링크

컴파일 함수가 필요하지 않은 경우 선언을 모두 건너 뛰고 link지시문 구성 오브젝트의 특성 아래에서 사후 링크 함수를 제공 할 수 있습니다 .

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

컨트롤러 없음

위의 예에서, controller필요하지 않은 경우 단순히 기능을 제거 할 수 있습니다 . 예를 들어 post-link기능 만 필요한 경우 다음을 사용할 수 있습니다.

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

답변

<div ng-repeat="i in [0,1,2]">
    <my-directive>{{i}}</my-directive>
</div>

    <my-directive>{{i}}</my-directive>

<tr ng-repeat="raw in raws">
    <my-raw></my-raw>
</tr>