在窗口调整大小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 图表时使用它，该图表根据 scope.width 计算点和线。如果这改变了整个图表需要改变。

Answer 1

在一个完美的世界里，你应该使用Resize Observer。但是，现在它还没有准备好投入生产，因为它是 very limited 和浏览器（仅限 Chrome）

所以你可以通过这种方式尝试获取一些 polyfills，当所有浏览器都支持这个功能时，你将摆脱 polyfill 或尝试找到其他东西，如 this 独立库或 this JQuery 插件

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

希望这会有所帮助。