angularjs - 屏幕上的 Angular 变化元素高度宽度或高度变化

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

        }
    };
}]);

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

我也试过听 innerWidth，但效果不佳。

我的代码有什么问题？

Answer 1

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

要在调整视口(viewport)大小时执行某些操作，请使用 native resize 事件:

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

---

如果上面的内容并没有真正告诉您您考虑调整大小的所有内容，您可以改为执行您当前正在做的事情，并且在窗口调整大小时触发 $digest():

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

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