在 AngularJS 中处理高度变化的传统方法(例如使用计时器)可能会带来延迟和低效率等缺点。更有效的解决方案是利用 AngularJS 的内置监视机制。
新的和改进的指令:
emHeightTarget 指令注册一个监视在 __height 属性上,该属性由 emHeightSource 指令在每个摘要周期进行更新。当 __height 属性更改时,该指令会根据新的高度值更新目标元素的 margin-top 样式。
<code class="javascript">.directive( 'emHeightTarget', function() { return { link: function( scope, elem, attrs ) { scope.$watch( '__height', function( newHeight, oldHeight ) { elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' ); } ); } } } )</code>
emHeightSource 指令注册一个执行每个消化循环。它用元素的当前高度更新 __height 属性。
<code class="javascript">.directive( 'emHeightSource', function() { return { link: function( scope, elem, attrs ) { scope.$watch( function() { scope.__height = elem.height(); } ); } } } )</code>
优点:
以上是AngularJS 如何高效处理高度变化?的详细内容。更多信息请关注PHP中文网其他相关文章!