8

所以 Chrome显然有一个错误，当手动调整元素大小时，用 a 观察元素的大小MutationObserver不起作用。

在修复错误之前，我应该使用什么来代替或补充它才能在 Chrome 中进行这项工作？我应该使用已弃用的突变事件还是有其他更好的选择？

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

4

4 回答 4

3

为了查看元素的大小，您有以下选项：

  • 使用 aMutationObserver您可以观察元素的属性在手动调整元素大小时发生变化。这是 Chrome 中的一个错误。

  • 您可以在计时器间隔内使用 JavaScript 不断地轮询元素大小，但您已经表明这不是您希望使用的东西。

  • 我知道的最后一个选项是使用CSS element queries。

最后一个选项通过使用所有浏览器都支持元素的溢出事件这一事实来工作。它将改变您现有页面的布局，强制您正在调整的元素相对或绝对定位。如果你有一个简单的 css 页面，完全没有问题，但更复杂的布局可能会遇到问题。

于 2013-12-22T08:45:17.067 回答
2

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

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

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

于 2013-12-23T20:10:32.200 回答
1

我的建议，

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

其次，在指令中添加一个空的观察者，如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;
};

三、在controller中为这个高度设置一个watcher

控制器

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

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

--- 编辑 ---
这涵盖了大多数 angular-js 相关事件。然而，它不包括手动调整大小，即窗口大小调整、vanilla javascript 大小调整等。

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

于 2013-12-24T08:01:22.247 回答
1

在 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会监控元素的维度。

于 2013-12-23T20:24:16.377 回答