Question

我的应用程序具有大量更改大小的元素（菜单扩展，无限滚动，过滤结果等）。当调整大小时，元素可能会卡在固定的底部导航栏元素后面，从而隐藏元素的底部。为了解决这个问题，我创建了一个自定义指令，用于比较窗口高度（当然减去导航栏高度）和元素高度。如果元素高度大于窗口高度减去导航栏高度，则会在元素底部添加额外的边距，以便在滚动时显示隐藏在底部导航栏后面的内容。

所以......当它被解雇时它会起作用。但由于某些原因，当元素高度发生变化时，它并不总是会触发。什么是错误的最明显的例子是当用户点击一个字形来扩展菜单...并且仅在点击时每隔一次添加边距...但是如果用户点击相同的字形然后与另一个元素交互，则触发例如，鼠标悬停事件，添加了边距，这使我认为它是一个消化的东西。

这是带有$ watch函数的指令：

app.directive('addMargin', ['$window', '$timeout', function($window, $timeout) 
{ return function (scope, element, attribute) {

  var elementMarginBottom = parseInt($window.getComputedStyle(element[0]).marginBottom);
  var container = element;
  var windowHeight = windowHeight = $window.innerHeight;
  var containerHeight = element[0].offsetHeight;

  function addMargin ()
  {
    if ((windowHeight-135) < containerHeight)
    {
      container.css('margin-bottom', 135 + elementMarginBottom + 'px');
      console.log('margin added to', attribute.addMargin, 'total margin is: ', 135 + elementMarginBottom);
    }
    else
    {
      container.css('margin-bottom', elementMarginBottom + 'px');
      console.log('margin removed from', attribute.addMargin, 'total margin is: ', elementMarginBottom);
    }
  }

  scope.$watch( 
    function(){
      return containerHeight = element[0].offsetHeight;
    }, 
    function(){
      // $timeout(function(){
        containerHeight = element[0].offsetHeight;
        console.log('element offset: ', containerHeight);
        addMargin();
      // },100);
  }, true); 

}
}]);

并且指令属性放在特定视图的顶级容器中，如下所示：

<div class="container basic-search-top-container" 
    ng-class="{'menu-is-visible':srchCtrl.isVisibleFirst}" 
    ng-hide="!srchCtrl.isLoggedIn()" 
    add-margin="search">

所以底线 - 每当元素的高度发生变化时，我都需要触发$ watch。而现在它似乎有选择地这样做了。

指令的$ watch功能偶尔会被解雇

0 个答案: