DOM이 렌더링을 마친 후 지시문을 어떻게 실행할 수 있습니까?

분명하지 않은 겉보기에 간단한 문제가 있습니다 (Angular JS 문서를 읽음) 해결책 있습니다.

DOM에서 컨테이너의 높이를 정의하기 위해 다른 DOM 요소의 높이를 기반으로 일부 계산을 수행하는 Angular JS 지시문이 있습니다.

이와 비슷한 것이 지시문 내부에서 진행됩니다.

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

문제는 지시문이 실행될 때 $('site-header')찾을 수 없어 필요한 jQuery 래핑 된 DOM 요소 대신 빈 배열을 반환한다는 것입니다.

DOM이로드 된 후에 만 ​​실행되고 일반 jQuery 선택기 스타일 쿼리를 통해 다른 DOM 요소에 액세스 할 수있는 내 지시문 내에서 사용할 수있는 콜백이 있습니까?

$ ( 'site-header') 구성 방법에 따라 다릅니다.

0 지연으로 $ timeout 을 사용할 수 있습니다 . 다음과 같은 것 :

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

작동 원리 설명 : 하나 , 둘 .

$timeout지시문 에 삽입하는 것을 잊지 마십시오 .

.directive('sticky', function($timeout)

방법은 다음과 같습니다.

app.directive('example', function() {

    return function(scope, element, attrs) {
        angular.element(document).ready(function() {
                //MANIPULATE THE DOM
        });
    };

});

아마도 저자는 더 이상 내 대답이 필요하지 않을 것입니다. 그래도 완전성을 위해 다른 사용자가 유용하다고 생각합니다. 가장 좋고 가장 간단한 해결책은 $(window).load()반환 된 함수의 본문 내부에서 사용 하는 것입니다. (또는 사용할 수 있습니다document.ready . 모든 이미지가 필요한지 여부에 따라 다릅니다).

사용 $timeout 내 소견에하는 것은 매우 약한 옵션이며 경우에 따라 실패 할 수 있습니다.

내가 사용할 완전한 코드는 다음과 같습니다.

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});

ngcontentloaded이벤트 가 있는데 사용할 수있을 것 같아요

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function(scope, elem, attrs){

                $$window = $ $window


                init = function(){
                    contentHeight = elem.outerHeight()
                    //do the things
                }

                $$window.on('ngcontentloaded',init)

       }
   }
});

외부 리소스로 인해 $ timeout을 사용할 수없고 특정 타이밍 문제로 인해 지시문을 사용할 수없는 경우 broadcast를 사용하세요.

$scope.$broadcast("variable_name_here");원하는 외부 리소스 또는 장기 실행 컨트롤러 / 지시문이 완료된 후에 추가하십시오 .

그런 다음 외부 리소스가로드 된 후 아래를 추가합니다.

$scope.$on("variable_name_here", function(){ 
   // DOM manipulation here
   jQuery('selector').height(); 
}

예를 들어 지연된 HTTP 요청의 약속에서.

MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}

비슷한 문제가 있었고 여기에서 내 솔루션을 공유하고 싶습니다.

다음 HTML이 있습니다.

<div data-my-directive>
  <div id='sub' ng-include='includedFile.htm'></div>
</div>

문제 : 부모 div 지시문의 링크 기능에서 자식 div # sub를 jquery'ing하고 싶었습니다. 그러나 지시문의 링크 기능이 실행될 때 ng-include가 완료되지 않았기 때문에 빈 객체를주었습니다. 그래서 먼저 $ timeout을 사용하여 더러운 해결 방법을 만들었습니다. 작동했지만 지연 매개 변수는 클라이언트 속도에 따라 달라졌습니다 (아무도 좋아하지 않음).

작동하지만 더럽습니다.

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        $timeout(function() {
            //very dirty cause of client-depending varying delay time 
            $('#sub').css(/*whatever*/);
        }, 350);
    };
    return directive;
}]);

다음은 깨끗한 솔루션입니다.

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        scope.$on('$includeContentLoaded', function() {
            //just happens in the moment when ng-included finished
            $('#sub').css(/*whatever*/);
        };
    };
    return directive;
}]);

누군가에게 도움이 될 수도 있습니다.