Bagaimana saya bisa menjalankan direktif setelah dom selesai rendering?

Saya punya masalah yang tampaknya sederhana tanpa solusi yang jelas (dengan membaca dokumen Angular JS) .

Saya mendapat arahan Angular JS yang melakukan beberapa kalkulasi berdasarkan tinggi elemen DOM lainnya untuk menentukan ketinggian wadah di DOM.

Sesuatu yang mirip dengan ini terjadi di dalam arahan:

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

Masalahnya adalah ketika arahan berjalan, $('site-header')tidak dapat ditemukan, mengembalikan array kosong sebagai ganti elemen DOM yang dibungkus jQuery yang saya butuhkan.

Apakah ada callback yang dapat saya gunakan dalam direktif saya yang hanya berjalan setelah DOM dimuat dan saya dapat mengakses elemen DOM lainnya melalui kueri gaya pemilih jQuery biasa?

Itu tergantung pada bagaimana $ ('site-header') Anda dibuat.

Anda dapat mencoba menggunakan $ timeout dengan 0 penundaan. Sesuatu seperti:

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

Penjelasan cara kerjanya: satu , dua .

Jangan lupa untuk memasukkan $timeoutarahan Anda:

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

Inilah cara saya melakukannya:

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

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

});

Mungkin penulis tidak membutuhkan jawaban saya lagi. Namun, demi kelengkapan, saya rasa pengguna lain mungkin menganggapnya berguna. Solusi terbaik dan paling sederhana adalah menggunakan $(window).load()di dalam tubuh fungsi yang dikembalikan. (Alternatifnya, Anda dapat menggunakan document.ready. Itu sangat tergantung apakah Anda membutuhkan semua gambar atau tidak).

Menggunakan $timeoutmenurut pendapat saya adalah opsi yang sangat lemah dan mungkin gagal dalam beberapa kasus.

Ini kode lengkap yang akan saya gunakan:

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

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

ada ngcontentloadedacara, saya pikir Anda bisa menggunakannya

.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)

       }
   }
});

Jika Anda tidak dapat menggunakan $ timeout karena sumber daya eksternal dan tidak dapat menggunakan perintah karena masalah waktu tertentu, gunakan siaran.

Tambahkan $scope.$broadcast("variable_name_here");setelah sumber daya eksternal yang diinginkan atau pengontrol / direktif yang berjalan lama selesai.

Kemudian tambahkan di bawah ini setelah sumber daya eksternal Anda dimuat.

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

Misalnya dalam janji permintaan HTTP yang ditangguhkan.

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

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

Saya memiliki masalah serupa dan ingin membagikan solusi saya di sini.

Saya memiliki HTML berikut:

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

Masalah: Dalam fungsi tautan direktif div induk saya ingin membuat kueri div # sub anak. Tapi itu hanya memberi saya objek kosong karena ng-include belum selesai ketika fungsi tautan direktif dijalankan. Jadi pertama-tama saya membuat solusi kotor dengan $ timeout, yang berfungsi tetapi parameter penundaan bergantung pada kecepatan klien (tidak ada yang suka itu).

Bekerja tapi kotor:

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;
}]);

Inilah solusi bersihnya:

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;
}]);

Mungkin itu membantu seseorang.