angularJS如何监听$window.innerHeight

Question

angularJS应该如何监听$window.innerHeight
在directive里想监听屏幕大小自动调整div的高度
用$scope.$watch貌似监听不到
新手上路，请各位大神指点

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在AngularJS中，你可以使用$window对象的innerHeight属性来获取窗口的高度。以下是一个简单的示例：

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(function() {
                return $window.innerWidth;
            }, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    // 如果宽度发生变化，则更新div的高度
                    var height = newVal * 20; // 假设每个元素高度为20px
                    element.css('height', height + 'px');
                }
            });
        }
    };
});

在这个例子中，我们首先通过$window.innerWidth获取当前的窗口宽度。然后，在每次宽度变化时，我们都会检查这个值是否与之前的值不同。如果是不同的，那么我们就根据新的宽度计算出一个新的高度，并将其设置到元素的style属性中。

注意：这里的height变量只是一个示例，你需要根据你的需求来定义它。例如，你可能想要改变其他元素的尺寸，或者只是改变背景颜色等。

此外，如果你希望在浏览器窗口加载完成后也执行这些操作，你可以考虑使用ngAfterViewInit指令：

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(function() {
                return $window.innerWidth;
            }, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    // ... same as before ...
                }
            });

            ngAfterViewInit();
        }
    };
});

这样，当页面完全加载完毕后，也会进行宽度检测。