AngularJS:观察高度变化的更好方法 [英] AngularJS: Better way to watch for height change

问题描述

我遇到了旧的可变高度导航问题:顶部的 position: fix 导航和下面的 margin-top: $naviHeight 内容.当数据异步加载时，导航可以改变高度，因此内容的边距必须随之改变.

我希望这是自包含的.所以没有加载数据的代码，而只在涉及的 html-elements/directives 中.

目前我正在 AngularJS 1.2.0 中使用这样的计时器:

/** 在高度改变和改变 margin-top 时得到通知*/.directive('emHeightTarget', function(){返回 {链接:函数(范围，元素，属性){scope.$on('heightchange', function(ev, newHeight){elem.attr( 'style', 'margin-top: ' + (58+newHeight) + 'px' );});}}})/** 定期检查此元素的高度变化*/.directive( 'emHeightSource', ['$timeout', function( $timeout ) {返回 {链接:函数(范围，元素，属性){函数 __check(){var h = elem.height();if( h != scope.__height ){scope.__height = h;scope.$emit('heightchange', h);}$timeout( __check, 1000 );}__查看();}}}])

这有明显的使用计时器的缺点(我觉得这有点难看)和在导航调整大小后有一定的延迟，直到内容被移动.>

有没有更好的方法来做到这一点?

解决方案

这是通过在 emHeightSource 中注册一个观察者来工作的，该观察者每个 $digest 都会被调用.它更新了 __height 属性，该属性依次在 emHeightTarget 中监视:

/** 当高度改变和改变 margin-top 时得到通知*/.directive('emHeightTarget', function() {返回 {链接:函数(范围，元素，属性){scope.$watch('__height', function( newHeight, oldHeight ) {elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );});}}})/** 检查每个 $digest 的高度变化*/.directive('emHeightSource', function() {返回 {链接:函数(范围，元素，属性){范围.$watch(函数(){scope.__height = elem.height();});}}})

I'm having the old variable height navigation problem: A position: fixes navigation on top and a content with margin-top: $naviHeight below. The navigation can change height when data is loaded asynchronously and so the content's margin has to change with it.

I want this to be self contained. So no code where the data is loaded but only in the involved html-elements/directives.

Currently I'm doing it in AngularJS 1.2.0 with a timer like this:

/*
* 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();
        }
    }

} ] )

This has the obvious drawback of using the timer (which i feel kind of ugly) and a certain delay after the navigation resized until the content is moved.

Is there a better way to do this?

解决方案

This works by registering a watcher in emHeightSource which is called every $digest. It updates the __height property which is in turn watched in 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();
            } );
        }
    }

} )

这篇关于AngularJS:观察高度变化的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！