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独立lib或{ {3}} JQuery插件

一个注意事项。你也可以监听窗口调整大小，每次检查div的宽度，但不是100％正确的解决方案，因为div的宽度可以改变而不改变窗口的宽度。

希望这有帮助。

跟踪窗口上的元素宽度resize angularjs

1 个答案: