tracking element width on window resize angularjs

Question

I'm trying to build a directive that keeps track of the width of a container and changes it on window resizes. I've found a lot of directives that keep track of window resizing dynamically, but is it somehow possible to rewrite the directive to still fire every resize but instead of calculating the window width on every fire, calculate the width of a specific element? So far I've used:

app.directive('monitorWindow', ['$window', function ($window) {
    return {
        link: link,
        restrict: 'A'
    };
    function link(scope, element, attrs){
        scope.windowWidth = $window.innerWidth ;

        function onResize(){
            console.log("window width is: " + $window.innerWidth);
            // uncomment for only fire when $window.innerWidth change
            if (scope.windowWidth !== $window.innerWidth)
            {
                scope.windowWidth = $window.innerWidth;
                scope.$digest();
            }
        }

        function cleanUp() {
            angular.element($window).off('resize', onResize);
        }

        angular.element($window).on('resize', onResize);
        scope.$on('$destroy', cleanUp);
    }
}]);

Which keeps track of the window size and not of a specific div. I've found a directive that gets the element dimensions but doesn't update on resizing. Both of them next to eachother for testing: https://codepen.io/mbezema/pen/odBpPo

I use this as I'm building an svg graph inside a div that calculates points and lines based on a scope.width. If that changes the whole graph needs to change.

Drag13 · Accepted Answer · 2018-04-30 08:39:08Z

1

In a perfect world you should use Resize Observer. But, right now it is still not ready for production because it is very limited with browsers (Chrome only)

So you can go this way and try to get some polyfills and when all browsers will support this feature you will get rid of the polyfill or try to find something else like this standalone lib or this JQuery plugin

One note. You also can listen on window resize and each time check div's width, but is not 100% correct solution because width of the div can be changed without change the width of the window.

Hope this helps.

answered Apr 30, 2018 at 8:39

Drag13

6,0281 gold badge22 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mBo Over a year ago

I want to recalculate points of an svg graph according to the size of the div that it is in, the div will only change on changing window sizes. A resize observer looks at a resize from a user? and not at window resizing? "One note. You also can listen on window resize and each time check div's width, but is not 100% correct solution because width of the div can be changed without change the width of the window." this is exactly what i want but i cant get this working :(

Drag13 Over a year ago

@mBo Resize observer will check sizes of element it observe so this should the best option but browser support ruins this :(

Collectives™ on Stack Overflow

tracking element width on window resize angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related