使用jQuery从指令错误的元素高度

我是Angular的新手，我正在尝试使用jQuery从Directive做一些DOM计算和操作。 然而，我所拥有的是我元素的错误高度。 在我的情况下，元素就像容器 – 所以高度几乎都是视口高度。

directives.directive('responsiveAlerts', ['$log', '$window', function ($log, $window) { return { restrict: 'A', compile: function (element, attributes) { console.log($('.page').height()); } }; }]); 

我身高是46，这是错误的。 当我输入控制台时：

 $('.container').height(); 

因为页面已加载 – 我的容器高度正确。 有谁知道为什么会有这样的差异？

提前谢谢了！

Answer 1

指令的compile方法在角度链接所有模板并呈现它们之前运行。 如果你在console.log的行上放置一个断点，你会看到这个。 浏览器窗口几乎是空的，因此注册的高度是正确的。

如果您需要正确的页面高度，请在其上放一个$watch并处理它，只要它发生变化：

 directives.directive('responsiveAlerts', ['$log', '$window', function ($log, $window) { return { restrict: 'A', link: function ($scope) { var elPage = angular.element('.page'); $scope.$watch(elPage.height, function () { console.log(elPage.height()); } } }; }]);