지시어의 링크 함수가 실행되기 전에 중첩 된 내용을 컴파일하십시오.

Question

링크 함수가 실행되기 전에 중재 된 내용을 컴파일하려고합니다. 현재 ng-bind-safe의 코드가 있다면 링크 기능이 끝날 때까지 콘텐츠가 추가되지 않습니다.

링크 기능에서 scope.$apply()을 수행 할 수 있지만 작동하지만 다이제스트주기가 이미 진행 중이므로 콘솔 오류가 발생합니다.

생각하십니까? 고맙습니다!

Answer 1

컴파일 및 링크 단계 ($ compile 및 $ link 함수) 중에는 $ compile 함수에서 템플릿에 액세스 할 수 있고 $ link 함수에서 범위와 템플릿에 액세스 할 수 있습니다. 아직 렌더링되지 않은 템플릿 때문에 렌더링 된 템플릿에 액세스 할 수 없습니다. 이를 위해 콜백 함수를 제공 할 시계 식을 설정해야합니다. Angular는보고있는 값이 변경되었을 때 알려주고,이 콜백에서는 렌더링 된 템플릿에 액세스 할 수 있습니다.

이 감시 식은 $ link 함수 내에서만 수행 할 수 있습니다. 이는 해당 지시문에서 올바른 범위에 액세스 할 수 있기 때문입니다.

app.directive('tmTime', function() { 
    return { 
     restrict: 'A', 
     template: '<div>{{time}}</div><div ng-transclude></div>', 
     transclude: true, 
     link: function (scope, element, attr) { 
      scope.time = 'Its hammer time!'; 
      scope.$watch('time', function(newVal, oldVal) { 
        // this is your call back function 
        // within here, you have access to the rendered template 
        alert(element[0].outerHTML); // (it's hammer time! in first div, transcluded contents in second div) 
      }); 
     } 
    }; 
});