跟踪元素宽度 window 调整大小 angularjs

Question

我正在尝试构建一个指令来跟踪容器的宽度并在 window 调整大小时更改它。我发现了很多跟踪 window 动态调整大小的指令，但是是否有可能重写指令以在每次调整大小时仍然触发，而不是在每次触发时计算 window 宽度，而是计算特定元素的宽度？到目前为止我用过：

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);
    }
}]);

跟踪 window 大小而不是特定的 div。我找到了一个获取元素尺寸但不会在调整大小时更新的指令。他们两个彼此相邻进行测试： https://codepen.io/mbezema/pen/odBpPo

我在 div 中构建 svg 图形时使用它，它根据 scope.width 计算点和线。如果这改变了整个图表需要改变。

Answer 1

在完美的世界中，您应该在浏览器中使用 Resize Observer. But, right now it is still not ready for production because it is very limited（仅限 Chrome）

所以你可以通过这种方式尝试获得一些 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 插件

一张纸条。您还可以监听 window resize 并每次检查 div 的宽度，但这不是 100% 正确的解决方案，因为可以更改 div 的宽度而不更改 window。

希望对您有所帮助。

跟踪元素宽度 window 调整大小 angularjs

tracking element width on window resize angularjs

javascript

angularjs

angularjs-directive