AngularJS中的窗口调整大小事件答案

【问题标题】：Window resize event in AngularJSAngularJS中的窗口调整大小事件
【发布时间】：2016-02-23 07:06:13
【问题描述】：

我已经在谷歌上搜索了一段时间，到目前为止，我发现了如何使用窗口调整大小指令调整窗口大小，但在我的代码中，我使用 window.innerHeight 来获取初始高度。我可以随时使用它，除非我需要一个事件来改变它。 JavaScript window resize event 出于某种原因不会为我开火。这是我在控制器内部的代码：

function adjustH() {
    var bodyElem = document.getElementsByTagName('body')[0];
    var topP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-top');
    topP = topP.substring(0, topP.indexOf("px"));
    var bottomP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-bottom');
    bottomP = bottomP.substring(0, bottomP.indexOf("px"));
    vm.h = window.innerHeight - topP - bottomP - 20;
}

window.onresize = function(event) {
    adjustH();
}

谁能告诉我这种方式是否不可能，我必须走指令路线吗？或者如果可能的话，请告诉我我错过了什么。

【问题讨论】：

标签： javascript angularjs resize window-resize

【解决方案1】：

如果您正在使用 angularJS，您是否将 $window 作为依赖项传递给您的控制器。

我之前也遇到过类似的问题，这是因为没有设置依赖关系。希望这会有所帮助。

【讨论】：

如果您添加了 angularJS 控制器以及您正在使用的任何指令或服务，将会很有帮助
没关系，你是对的。但我唯一不明白的是为什么我的window.innerHeight 工作并且我不必将它传递给控制器。
我的画布也设置为height="{{vm.h}}"，但只有当我将鼠标悬停时才会调整大小
如果您不介意，请发布其余代码，这将有助于确定问题...可能与您的范围和/或事件传播有关

【解决方案2】：

在阅读了您的评论后

我的画布也设置为height="{{vm.h}}"，但只有当我将鼠标悬停时才会调整大小

看来你需要调用$scope.$apply()（或$rootScope.$apply()）来更新元素的height属性。

如果您从指令/控制器中添加更多代码，我可以给您更详细的答案。

【讨论】：

我会试试这个并告诉你