자식 지시 전에 부모 지시를 실행하는 방법?

자식 지시 전에 부모 지시를 실행하는 방법?

정렬 가능하고 복제 가능한 위젯을 만들기 위해 부모 지시문과 자식 지시문의 두 가지 각 지시문을 작성하려고 합니다.마크업의 목적은 다음과 같습니다.

<div class="widget-container" data-sortable-widgets>
      <section class="widget" data-cloneable-widget></section>
<div>

그러나 자식 명령은 특정 요소를 사용할 수 있기 전에 부모 이전에 실행되는 것으로 보입니다(부모에 의해 추가됨).

function SortableWidgetsDirective() {
    return {
        priority: 200,
        restrict: 'A',
        link: function ($scope, element, attrs) {
            element.find(".widget header").append($("<div class='widget-controls'></div>"));
            element.sortable({  });
        }
    };
}

function CloneableWidgetDirective() {
    return {
        priority: 100,
        restrict: 'A',
        link: function ($scope, element, attrs) {
            // This directive wrongfully executes first so widget-controls is no available
            element.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
        }
    };
}

보시다시피 우선 순위를 설정하려고 했는데 요소가 달라서 안 되는 것 같아요.

어떻게 하면 부모님을 먼저 실행시킬 수 있습니까?

추리

postLink()역순으로 실행된다는 것은 아동 지시의postLink()가 상위 값 앞에 호출됩니다(즉, 깊이가 먼저).어떤 이유에서인지 기본 동작입니다 (link()실제로 다음을 말합니다.postLink()). 다행히도 우리도 있습니다.preLink(), 반대로 효과가 있습니다. 우리는 그것을 우리의 이익을 위해 활용할 수 있습니다.

이를 설명하기 위해 - 다음 코드 조각:

app.directive('parent', function($log) {
    return {
        restrict: 'E',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    $log.info('parent pre');
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $log.info('parent post');
                }
            }
        }
    };
});

app.directive('child', function($log) {
    return {
        restrict: 'E',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    $log.info('child pre');
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $log.info('child post');
                }
            }
        }
    };
});

… 는 다음을 출력합니다.

> parent pre
> child pre
> child post
> parent post 

보세요.

해결책

부모 지시의 논리가 자식 지시보다 먼저 수행되기를 원하는 경우, 명시적으로 다음을 사용합니다.preLink():

function SortableWidgetsDirective() {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    iElement.find(".widget header").append($("<div class='widget-controls'></div>"));
                    iElement.sortable({});
                },
                post: angular.noop
            }
        }
    };
}

function CloneableWidgetDirective() {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    iElement.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
                },
                post: angular.noop
            }
        }
    };
}

참고문헌

• $compile 앵귤러 호의 취항JS 문서.

---

포스트 스크리쿰

• 그건 그렇고, 당신 말이 맞습니다.priority는 동일한 요소를 공유하는 지시어와 함께 사용하기 위한 것입니다.

• angular.noop아무것도 반환하지 않는 빈 메서드일 뿐입니다.만약 당신이 여전히 사용하고,postLink()functions, 보통처럼 function declaration 대신에 function declaration을 배치합니다.

  post: function postLink(scope, iElement, iAttrs, controller) { ... }
  

• 사용에 주의해야 합니다.templateUrl , 템플릿 로드가 비동기식이므로 템플릿이 로드될 때까지 컴파일/링크가 일시 중단됩니다.^[source]결과적으로 집행 순서에 차질이 생길 것입니다.이 문제를 해결하려면 에 줄을 그은 템플릿을 포함해야 합니다.template대신에 재산을.

언급URL : https://stackoverflow.com/questions/22081140/how-to-execute-parent-directive-before-child-directive