javascript - 跟踪窗口调整大小 AngularJS 上的元素宽度

Question

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

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

它跟踪窗口大小而不是特定的 div。我发现一个指令可以获取元素尺寸但不会在调整大小时更新。两者并排进行测试: https://codepen.io/mbezema/pen/odBpPo

我使用它是因为我在 div 内构建一个 svg 图形，该图形根据 range.width 计算点和线。如果这改变了整个图表就需要改变。

Answer 1

在完美的世界中，您应该使用 Resize Observer 。但是，现在它还没有准备好投入生产，因为它是 very limited使用浏览器(仅限 Chrome)

所以你可以沿着这条路尝试得到一些polyfills当所有浏览器都支持此功能时，您将摆脱 polyfill 或尝试找到其他类似 this 的东西。独立库或 this JQuery 插件

一个注释。您还可以监听窗口调整大小并每次检查 div 的宽度，但这不是 100% 正确的解决方案，因为可以更改 div 的宽度而不更改窗口的宽度。

希望这有帮助。