Question

因此，当手动调整元素大小时，使用apparently has a bug观察元素大小的Chrome MutationObserver无效。

在修复错误之前，我应该使用什么来代替或者除此之外还能在Chrome中使用它？我应该使用deprecated mutation events还是有另一种更好的选择？

有没有办法在不使用元素对象的情况下在AngularJS中做到这一点？

Answer 1

要观看元素的大小，您可以选择以下选项：

使用MutationObserver可以观察元素手动调整大小时更改的元素属性。这是is a bug in Chrome。
您可以在计时器间隔内使用JavaScript不断轮询元素大小，但您已表明这不是您想要使用的内容。
我所知道的最后一个选项是使用CSS element queries。

最后一个选项的工作原理是所有浏览器都支持元素的溢出事件。它将改变现有页面的布局，迫使您正在放置的元素相对或绝对定位。如果你有一个简单的css简单页面就没问题，但更复杂的布局可能会遇到问题。

Answer 2

我在制作一些响应元素时遇到了类似的问题，所以我最终使用了window.onresize：

window.onresize = function(){
        //do element changes here
        $scope.$apply();
    };

不确定这是否是您正在寻找的东西，但这种方法对我来说效果很好。

Answer 3

在Angular中使用观察者

$scope.$watch(function() {
  // whatever element you want to watch
  return $element.height();
}, function(newVal, oldVal) {
  // do something
});

我最好的出价是，当您调整任何元素的大小时，如果您在页面上完全使用角度，则可能会在另一个摘要周期内完成。要解决此问题，您可以在手动调整元素或窗口大小时使用$scope.$apply()手动触发消化。

// example to manual trigger digest with $apply()
app.run(function($window, $rootScope) {
  angular.element($window).on('resize', function() {
    $rootScope.$apply();
  });
});

这比setTimeout更好，因为它确实浪费了很多函数调用来检索高度。它仅在可能发生状态变化时检索。此外，在浏览器中使用时，这也比MutationObserver和MutationEvents更可靠。更重要的是，我不相信MutationObserver和MutationEvents将监视元素的维度。

Answer 4

我的推荐，

首先，为要观察高度的元素设置指令

其次，在指令中添加一个空的观察者，如doc所述

If you want to be notified whenever $digest is called, 
you can register a watchExpression function with no listener.(Since 
watchExpression can execute multiple times per $digest cycle when a 
change is detected, be prepared for multiple calls to your listener.)

指令

scope.$watch( function(){
  scope.elHeight = element.height(); // or element.offsetHeight;
};

第三，在控制器中为此高度设置观察者

cotroller

$scope.$watch('elHeight',  function(newVal, oldVal){
  console.log(newVal, oldVal)
};

每个$ digest意味着范围内每个与Angular相关的变化。

---编辑---
这涵盖了大多数与角度相关的事件。但是它不包括手动调整大小，即窗口大小调整，香草javascript大小调整等。

如果我使用AngularJS，我会在整个页面中完全使用Angular。因此，
对于那种情况，我会触发小事件以获得$ digest。

在Chrome中观看元素大小

4 个答案: