AngularJS $watch 如何替代动态导航高度调整中的计时器？

避免 AngularJS 的高度监视计时器

当导航高度是动态时，AngularJS 程序员经常面临响应式导航的挑战。这就导致需要根据导航高度的变化来调整内容的 margin-top 值。

以前，使用计时器来检测导航高度的变化，但这种方法有缺点：使用计时器和调整内容的 margin-top 时出现延迟。

幸运的是，存在更好的方法：利用 AngularJS 的 $watch 功能。在“emHeightSource”中注册了一个观察程序，而不是计时器，该观察程序在每个 $digest 周期期间被调用。观察者更新 '__height' 属性。

在 'emHeightTarget' 中，另一个观察者监视 '__height' 并相应更新 margin-top 值，确保内容的 margin-top 平滑变化并与导航同步高度。

这是使用观察者的精炼代码：

/*
 * 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 $watch 如何替代动态导航高度调整中的计时器？的详细内容。更多信息请关注PHP中文网其他相关文章！