我遇到了一个旧的可变高度导航问题:position: fixes顶部导航,margin-top: $naviHeight底部导航。异步加载数据时,导航可以更改高度,因此内容的边距也必须随之更改。
position: fixes
margin-top: $naviHeight
我希望这是自给自足的。因此,没有代码在何处加载数据,而仅在涉及的html-elements / directives中。
目前,我正在AngularJS 1.2.0中使用如下计时器进行操作:
/* * Get notified when height changes and change margin-top */ .directive( 'emHeightTarget', function(){ return { link: function( scope, elem, attrs ){ scope.$on( 'heightchange', function( ev, newHeight ){ elem.attr( 'style', 'margin-top: ' + (58+newHeight) + 'px' ); } ); } } }) /* * Checks this element periodically for height changes */ .directive( 'emHeightSource', ['$timeout', function( $timeout ) { return { link: function( scope, elem, attrs ){ function __check(){ var h = elem.height(); if( h != scope.__height ){ scope.__height = h; scope.$emit( 'heightchange', h ); } $timeout( __check, 1000 ); } __check(); } } } ] )
这有一个明显的 缺点,那就是使用计时器 (我觉得这很丑陋),并且 在调整导航大小之后 直到内容被移动 之后会有一定的延迟 。
有一个更好的方法吗?
这通过注册一个emHeightSource名为every 的观察者来工作$digest。它会更新该__height属性,该属性又将在监视emHeightTarget:
emHeightSource
$digest
__height
emHeightTarget
/* * Get notified when height changes and change margin-top */ .directive( 'emHeightTarget', function() { return { link: function( scope, elem, attrs ) { scope.$watch( '__height', function( newHeight, oldHeight ) { elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' ); } ); } } } ) /* * Checks every $digest for height changes */ .directive( 'emHeightSource', function() { return { link: function( scope, elem, attrs ) { scope.$watch( function() { scope.__height = elem.height(); } ); } } } )