javascript - Angular - ui-router - 指令 - 获取指令的偏移量/位置

Question

我在使用 Angular 和 ui-router 的许多项目中都遇到过这个问题。

我有一个指令，我只想获取它的大小/位置或其包含元素的大小/位置。在我的指令(在 ui-router View 中呈现)中，我附加了一个 Controller ，但是当我尝试获取大小时，它始终为零。

element.position() -> Object {top: 0, left: 0}
element.offset() -> Object {top: 0, left: 0}

在我的指令中我有这个:

templateUrl: 'some-html-file',
link: function (scope, elem, attrs, someController) {
    someController.init(elem);
}

在someController中

this.init = function (element) {
     $scope.element = element;
     console.log($scope.element.position());
     console.log($scope.element.offset());
}

我不确定如何获取指令的位置和大小。有什么想法吗？这是否与 ui-router 有关，或者可能与使用指令的 Angular 有关？我猜这是一个时间问题 - 在 Angular 完成 dom 之前尝试获取有关 dom 的信息？任何帮助表示赞赏!

Answer 1

此类与风格相关的例程需要推迟。当 link 运行时，有些事情没有发生(首先，子级的 link precedes 其父级)。通常你必须这样做

link: function (scope, elem, attrs, someController) {
    $timeout(function () {
        someController.init(elem);
    });
}

同样，其他指令会将某些事情推迟到下一个摘要，有时您需要非零延迟的 $timeout 才能使其工作。