Question

我是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());
        }
    }
  };
}]);

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

1 个答案: