ฉันจะเรียกใช้คำสั่งหลังจากที่ Dom เสร็จสิ้นการแสดงผลได้อย่างไร

ฉันมีปัญหาที่ดูเหมือนง่ายและไม่ชัดเจน(โดยการอ่านโซลูชันAngular JS docs)

ฉันมีคำสั่ง Angular JS ที่ทำการคำนวณบางอย่างตามความสูงขององค์ประกอบ DOM อื่น ๆ เพื่อกำหนดความสูงของคอนเทนเนอร์ใน DOM

สิ่งที่คล้ายกับสิ่งนี้เกิดขึ้นภายในคำสั่ง:

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

ปัญหาคือเมื่อคำสั่งทำงาน$('site-header')ไม่พบส่งคืนอาร์เรย์ว่างแทนที่จะเป็นองค์ประกอบ DOM ที่ห่อหุ้ม jQuery ที่ฉันต้องการ

มีการเรียกกลับที่ฉันสามารถใช้ภายในคำสั่งของฉันซึ่งทำงานหลังจากโหลด DOM แล้วเท่านั้นและฉันสามารถเข้าถึงองค์ประกอบ DOM อื่น ๆ ผ่านแบบสอบถามสไตล์ตัวเลือก jQuery ปกติได้หรือไม่

ขึ้นอยู่กับวิธีสร้าง $ ('site-header') ของคุณ

คุณสามารถลองใช้$ timeoutโดยมีการหน่วงเวลา 0 สิ่งที่ต้องการ:

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 เนื่องจากทรัพยากรภายนอกและไม่สามารถใช้คำสั่งได้เนื่องจากปัญหาเฉพาะเกี่ยวกับเวลาให้ใช้การออกอากาศ

เพิ่ม$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 ผู้ปกครองฉันต้องการ jquery'ing ลูก div # ย่อย แต่มันทำให้ฉันเป็นวัตถุว่างเปล่าเพราะ 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;
}]);

บางทีมันอาจจะช่วยใครสักคน