Dom işlemeyi bitirdikten sonra bir yönergeyi nasıl çalıştırabilirim?

Görünürde basit olmayan (Angular JS belgelerini okuyarak) bir çözümüm var.

DOM'daki bir kabın yüksekliğini tanımlamak için diğer DOM öğelerinin yüksekliğini temel alan bazı hesaplamalar yapan bir Angular JS yönergesine sahibim.

Direktifin içinde buna benzer bir şey var:

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

Buradaki sorun, yönerge çalıştığında, $('site-header')ihtiyacım olan jQuery sarmalanmış DOM öğesi yerine boş bir dizi döndürerek bulunamamasıdır.

Yalnızca DOM yüklendikten sonra çalışan yönergemde kullanabileceğim ve diğer DOM öğelerine normal jQuery seçici tarzı sorgular aracılığıyla erişebildiğim bir geri çağrı var mı?

$ ['Site-başlığınızın') nasıl oluşturulduğuna bağlıdır.

$ Timeout'u 0 gecikme ile kullanmayı deneyebilirsiniz . Gibi bir şey:

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

Nasıl çalıştığına dair açıklamalar: bir , iki .

$timeoutDirektifinize enjekte etmeyi unutmayın :

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

İşte bunu nasıl yapıyorum:

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

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

});

Muhtemelen yazarın artık cevabıma ihtiyacı olmayacak. Yine de, bütünlük adına, diğer kullanıcıların onu faydalı bulabileceğini düşünüyorum. En iyi ve en basit çözüm, $(window).load()döndürülen işlevin gövdesi içinde kullanmaktır . (alternatif olarak kullanabilirsinizdocument.ready . Gerçekten tüm resimlere ihtiyacınız olup olmadığına bağlıdır).

kullanma $timeoutBenim düşünceme göre çok zayıf bir seçenektir ve bazı durumlarda başarısız olabilir.

İşte kullanacağım kodun tamamı:

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

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

bir ngcontentloadedolay var bence kullanabilirsin

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

       }
   }
});

Dış kaynaklar nedeniyle $ timeout kullanamıyorsanız ve belirli bir zamanlama sorunu nedeniyle bir yönergeyi kullanamıyorsanız, yayını kullanın.

$scope.$broadcast("variable_name_here");İstenilen harici kaynak veya uzun süre çalışan denetleyici / yönerge tamamlandıktan sonra ekleyin .

Harici kaynağınız yüklendikten sonra aşağıdakileri ekleyin.

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

Örneğin, ertelenmiş bir HTTP isteği vaadinde.

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

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

Benzer bir sorun yaşadım ve çözümümü burada paylaşmak istiyorum.

Aşağıdaki HTML'ye sahibim:

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

Sorun: Üst div yönergesinin bağlantı işlevinde, alt div # alt öğesini jquery'lemek istedim. Ama bana boş bir nesne verdi çünkü yönergenin link fonksiyonu çalıştırıldığında ng-include bitmemişti. Bu yüzden önce $ timeout ile kirli bir çözüm yaptım, bu işe yaradı, ancak gecikme parametresi istemci hızına bağlıydı (kimse bunu sevmez).

Çalışıyor ama kirli:

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

İşte temiz çözüm:

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

Belki birine yardımcı olur.