Geek Answers Handbook

Chrome watch size

So, Chrome apparently has an error that monitors the size of an element since MutationObserver does not work when the element is changed manually.

What should I use instead or in addition to make this work in Chrome, too, until the error is fixed? Should I use obsolete mutation events or is there any other better alternative?

Is there a way to make this enjoyable in AngularJS without using an element element?

+7
javascript angularjs google-chrome mutation-observers
source share
4 answers

To see the size of an item, you have the following options:

  • Using MutationObserver , you can view the attributes of an element that change when the element is resized manually. This one is a bug in Chrome .

  • You can continuously check the size of an element using JavaScript in the timer interval, but you have indicated that this is not what you want to use.

  • The last option I know of is to use CSS element queries .

The latter option works using the fact that all browsers support overflow events for elements. This will change the structure of your existing page, forcing the element you cut is positioned relative to or absolutely. No problem if you have a simple page with simple css, but more complex layouts may run into problems.

+2
source share

I ran into a similar problem by creating some flexible elements, so I just ended up using window.onresize:

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

Not sure if this is what you are looking for, but this approach worked well for me.

+2
source share

Use an observer in an area in Angular

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

My best bet is that if you resize any item, it will most likely be done during another digest cycle if you make full use of angular on your page. To fix this, you can manually initiate the digest with $scope.$apply() when you resize an element or window manually.

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

This is better than setTimeout because it spends a lot of function calls to get the height. It is retrieved only with a possible change in state. In addition, it is also more reliable than MutationObserver and MutationEvents when used in a browser. What more, I do not believe that MutationObserver and MutationEvents will control the size of the element.

+1
source share

My recommendation

First set the directive for the element you want to view height

Secondly, in the directive add an empty observer, as said in the doc , like this

 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.)

directive

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

Third, set the observer in the controller for this height

cotroller

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

Each set of $ digest means all Angular-related changes within the scope.

--- change ---
This covers most events related to Angular-js. However, it does not apply to manual resizing, i.e. resizing a window, resizing vanilla javascript, etc.

If I use AngularJS, I would fully use Angular throughout the page. Thus,
in this case, I would have missed a small event to get $ digest.

+1
source share

More articles:


All Articles