AngularJS：有更好的方法来处理动态导航高度变化吗？

AngularJS：有更好的方法来处理动态导航高度变化吗？

维护固定导航栏的老问题一段时间以来，其下方的可变高度内容一直困扰着开发人员。传统上，计时器用于定期检查高度变化，并在检测到时触发边距调整。然而，这种方法有缺点：

• 引入计时器依赖
• 导致响应高度调整延迟

高级解决方案： AngularJS 观察者

更优雅、更高效的解决方案是利用 AngularJS 观察者：

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

} )

在此实现中：

• emHeightTarget 指令监视 __height 属性并在发生更改时更新边距。
• emHeightSource 指令注册一个观察器，该观察器在每个 $digest 周期用当前元素的高度更新 __height。

这种方法消除了对计时器的需求，并提供了更加简化和响应更快的解决方案。

以上是AngularJS：有更好的方法来处理动态导航高度变化吗？的详细内容。更多信息请关注PHP中文网其他相关文章！