AngularJS：观察高度变化的更好方法

小编典典

AngularJS：观察高度变化的更好方法

html

我遇到了一个旧的可变高度导航问题：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();
        }
    }

} ] )

这具有明显的 缺点，即使用计时器 （我觉得这很丑陋），并且 在调整导航大小之后 直到内容移动才有 一定的延迟 。

有一个更好的方法吗？

阅读 287

2020-05-10

共1个答案

小编典典

这通过注册一个emHeightSource名为every
的观察者来工作$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();
            } );
        }
    }

} )

2020-05-10