Question

console.dir(element[0].parentElement)
console.dir(element[0].parentElement.offsetTop)

我想在angularjs中获得父元素的偏移量。

我尝试获取有关parentElement的信息。

关于parentElement的第一行有offsetTop，如385。

但是当我像第二行一样检查parentElement.offsetTop时，它只返回0。

我尝试使用parentElement.getBoundingClientRect（），但它也返回0。

我怎么不能得到父元素的偏移？

Answer 1

这是一个使用jquery来获取父级偏移的示例（我还将创建一个如何使用角度的自定义属性指令执行此操作的示例。这是一个简单的示例：

<强> HTML

<div>
    <div id="mydiv"></div>
</div>

<强> JS

var element = $('#mydiv');
var parentOffset = $(element).offset();
console.log(parentOffset);

<强>角

<强> HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">

    <title></title>
</head>
<body ng-controller="myController">
    <div>
        <div parent-offset>Test</div>
    </div>
    <script src="scripts/jquery.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

<强> JS

(function () {
    angular.module('myApp', [])

    .controller('myController', function ($scope) {

    })
    .directive('parentOffset', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                console.log(element.parent().offset());
            }
        }
    })

}());

Answer 2

如果你把你的代码放在一个链接函数中，并且元素的parentElement的大小或位置取决于你如何基于范围变量呈现你的html，你就无法直接在链接函数中获得正确的offsetTop。

你会在当前角度消化之后通过以下方式尝试：

scope.$evalAsync(function(){
    console.log(element[0].parentElement.offsetTop);
})

检查是否有效。

如何使用angularjs在javascript中获取父元素的元素偏移量

2 个答案: