angularjs Sub-Direktive Element Auswahl

Question

Ich habe eine verschachtelte Direktive wie folgt.

<main> 
<app-header></app-header> 
<app-footer></app-footer> 
</main> 

Und app-footer Richtlinie hat einen kleinen div Inhalt über 50px Höhe.

<div class="footer"></div 

Deshalb möchte ich Höhe von Fußzeile in main Richtlinie Link-Funktion erhalten.

angular.module("app").directive("main", [function() { 

    return { 
     "restrict": "E", 
     "transclude": true, 
     "template": "<h1>hello</h1><div ng-transclude></div>", 
     "link": link 
    }; 

    function link(scope, element) { 

     var footerHeight1 = $(".footer").height() || 0; // returns 0 
     var footerHeight2 = element.find('.footer'); // returns prevObject 

    } 
}]); 

so kann ich Höhe der Fußzeile nicht erhalten.

Answer 1

Sie werden wahrscheinlich die Marge/Padding/Höhe von Haupt, basierend auf der Höhe der Fußzeile berechnen. Was Sie dafür tun können, ist in etwa so (die Fußhöhe kann sich mit der Zeit ändern):

function link(scope, element) { 
    var footer = element.find(".footer"); 

    scope.$watch(function() { 
     return footer.height(); 
    }, function(value) { 
     // do something with main, here you know the height of the footer 
     // footerheight = value 
    }); 

}