AngularJS：监视高度变化的更好方式

11 浏览
0 Comments

AngularJS：监视高度变化的更好方式

我遇到了旧的可变高度导航问题：顶部有一个 position: fixes 的导航，下面是一个具有 margin-top: $naviHeight 的内容。

当数据异步加载时，导航的高度可能会发生变化，因此内容的边距也必须相应变化。

我希望这个功能是自包含的，所以不会有加载数据的代码，只在涉及的HTML元素/指令中编写代码。

目前我在AngularJS 1.2.0中使用计时器来实现：

/*
* 当高度改变时通知并改变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' );
            } );
        }
    }
})
/*
* 定期检查此元素的高度变化
 */
.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();
        }
    }
} ] )

这种方法明显存在使用计时器的缺点（我觉得有点丑陋），并且导航调整大小后内容移动存在一定的延迟。

有更好的方法来解决这个问题吗？

0