Question

我正在尝试创建一个指令来监听屏幕大小（宽度或高度）的变化，并会改变我的元素高度。

目的是我希望我的元素扩展到浏览器窗口的末尾。

这是我的指示：

.directive('strechToBottom', ['$document', '$window', function ($document, $window) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {

            var space;

            scope.$watch(function () {
                return $window.innerHeight;
            }, function () {
                space = $window.innerHeight - element[0].offsetTop;
                element.css('min-height', space + "px");
            });

        }
    };
}]);

创建元素时，函数被调用，一切正常。问题是当我改变我的屏幕大小时，函数不会被调用，它会在一段时间后被调用，好像它需要时间直到函数在循环中调用或我无法理解的东西。

我试着也听内心宽度，但这也不行。

我的代码有什么问题？

Answer 1

绑定到所有范围摘要，正如您通过将函数作为第一个参数传递给$scope.$watch所做的那样，使函数以非确定性方式执行（从您的角度来看）。基本上，它只会在与应用程序的某种形式的交互中执行（这不是很准确，但它是一个很好的初步近似）。

要在调整视口大小时执行某些操作，请使用本机resize事件：

angular.element($window).on('resize', function () {
    $scope.$apply(function () {
        // ... perform your magic here
    });
});

如果上述内容并未真正告知您考虑调整大小的所有内容，则可以改为执行您当前正在执行的操作，并在窗口调整大小时触发$digest()：

angular.element($window).on('resize', function () {
    $scope.$digest();
});

但是，您应该警惕要在每个摘要上执行的绑定函数的性能影响。

屏幕上的角度变化元件高度在宽度或高度上变化

1 个答案: