因此，当手动调整元素大小时，Chrome apparently has a bug 无法使用 MutationObserver 观察元素的大小。
在修复错误之前，我应该使用什么来代替或补充它才能在 Chrome 中进行这项工作？我应该使用deprecated mutation events 还是有其他更好的选择？
有没有办法在 AngularJS 中做到这一点而不使用元素对象？
【问题讨论】：
标签： javascript google-chrome angularjs mutation-observers
要查看元素的大小，您有以下选项：
使用MutationObserver，您可以观察手动调整元素大小时元素的属性变化。这个is a bug in Chrome。
您可以使用 JavaScript 在计时器间隔内不断轮询元素大小，但您已表明这不是您希望使用的东西。
我知道的最后一个选项是使用CSS element queries。
最后一个选项的工作原理是所有浏览器都支持元素的溢出事件。它将改变您现有页面的布局，强制您正在调整的元素相对或绝对定位。如果你有一个简单的页面和简单的 css 完全没有问题，但更复杂的布局可能会遇到问题。
【讨论】：
MutationObserver 的唯一有效替代方案，谢谢。
在 Angular 的作用域上使用观察器
$scope.$watch(function() {
// whatever element you want to watch
return $element.height();
}, function(newVal, oldVal) {
// do something
});
我的最佳出价是，当您调整任何元素的大小时，如果您在页面上完全使用 Angular，则可能会在另一个摘要周期内完成。要解决此问题，您可以在手动调整元素或窗口大小时使用 $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 会监控元素的尺寸。
【讨论】：
$element[0].clientHeight，这是否也有效，或者我是否会遇到跨浏览器问题？它只需要在较新的 Chrome/Firefox 中运行。
$scope.$apply() 手动触发消化。
MutationObserver 和突变事件可以在手动调整元素大小的情况下监控元素的尺寸。我认为MutationObserver 将是这里介绍的所有其他解决方案中最好的解决方案，如果不是因为 Chrome 中的错误...
我的建议，
首先，为要观察高度的元素设置一个指令
其次，在指令中添加一个空的观察者，如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;
};
第三，在控制器中为这个高度设置一个观察者
控制器
$scope.$watch('elHeight', function(newVal, oldVal){
console.log(newVal, oldVal)
};
每一个 $digest 意味着范围内每一个 Angular 相关的变化。
--- 编辑 ---
这涵盖了大多数 angular-js 相关事件。但是它不包括手动调整大小，即窗口大小调整、香草 JavaScript 大小调整等。
如果我使用 AngularJS，我会在整个页面中完全使用 Angular。因此，
对于这种情况，我会触发小事件来调用 $digest。
【讨论】：
$element.on() 将使用已弃用的突变事件。但也许我会在 Chrome 中的错误修复之前使用它。
我在制作一些响应式元素时遇到了类似的问题，所以我最终使用了 window.onresize：
window.onresize = function(){
//do element changes here
$scope.$apply();
};
不确定这是否是您正在寻找的，但这种方法对我来说效果很好。
【讨论】：