angularjs副指示要素の選択

Question

私はこのようなネストされた指示文を持っています。

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

そしてapp-footerディレクティブはは50pxの高さについての小さなdivコンテンツを持っています。

<div class="footer"></div 

だから私はmainディレクティブリンク機能でフッタの高さを取得したいです。

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 

    } 
}]); 

私はフッターの高さを得ることができません。

Answer 1

おそらく、フッターの高さに基づいて、メインのマージン/パディング/高さを計算することになります。このためにできることは、次のようなものです（フッタの高さは時間が経つにつれて変化する可能性があります）。

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

}