AngularJS - 如何获取文档中元素的顶部和左侧位置的偏移量答案

【问题标题】：AngularJS - How to get offset of top and left position of an element in documentAngularJS - 如何获取文档中元素的顶部和左侧位置的偏移量
【发布时间】：2015-03-26 16:39:06
【问题描述】：

寻求大师的帮助，我在下面代码的重复列表中使用了 angularJS。我如何获得'div class="section"'的绝对位置或相对于文档的顶部和左侧偏移位置并在控制台中打印？是否可以使用 AngularJs 或者我需要使用 Jquery？

最终我的目标是获取偏移位置并使用它来定位模态窗口，但如果我能在上面得到帮助，我应该能够弄清楚其余的。

我的代码如下，提前致谢：

HTML

<body ng-controller="MyMgtCtrl">
    <div class="container-fluid" >
        <div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
        <label ng-click="showMenu()" class="label label-primary">Toggle</label>
    </div><!-- /.container -->
</body>

角度控制器

var myMgtApp = angular.module("myMgtApp");

myMgtApp.controller("MyMgtCtrl",function($scope){
    var data={
        showMenu:false,
        gapSection:[{headerID:1,sectionID:1,requirement:"SOME DATA 1"},
        {headerID:2,sectionID:1,requirement:"SOME DATA"},
        {headerID:2,sectionID:2,requirement:"SOME DATA 3"}]
    };

    $scope.data = data;
    $scope.gapSection = data.gapSection;
    $scope.showMenu=function($scope){
        data.showMenu=!data.showMenu;
    };
});

【问题讨论】：

标签： jquery css angularjs

【解决方案1】：

在ng-click 中，您会得到一个$event 对象，您可以将其传递给您的方法。

<label ng-click="showMenu($event)" class="label label-primary">Toggle</label>

该事件有两个属性pageX 和pageY，这可能是你想要的。

$scope.showMenu=function(passedEventObject){
    var x = passedEventObject.pageX;
    var y = passedEventObject.pageY;
    data.showMenu=!data.showMenu;
};

检查ng-clickdocumentation 的“参数”部分。

然后点击进入the $event page，上面写着

当 jQuery 存在时，该对象是 jQuery Event Object 的实例或类似的 jqLite 对象。一旦你得到这个，Angular 角色就结束了，这是一个 jQuery / DOM 问题。

（突出显示我的）

jQuery Event Object 显示了这两个属性。

更新：

这将为您提供鼠标的 X 和 Y，这与您在单击时进行模态定位的用例非常相关，但是，为了更准确，您可以尝试其他方法：

var position = $event.target.getBoundingClientRect();
var x = position.left;
var y = position.top;

【讨论】：

感谢您的回复。但是仔细查看细节，我相信 pageX 和 pageY 仅适用于鼠标光标位置。是否可以在我的代码中获取特定元素的位置，例如 div class="section"？
没错。您可以检查$event 是否具有target 作为本机DOM 元素，如果是，则更新后的答案可能有效（如果它是jqLite 元素，只需添加[0] 即可获取DOM 对象）。
太棒了！非常感谢您，这对于标签的确切位置非常有效，最重要的是它非常干净。还有一个问题要详细说明，是否可以遍历 $event 上的父元素或上一个元素？我尝试使用 .parent() 和 .prev() 但出现错误
一旦获得目标，它就是一个 DOM 元素。您可以使用原生 DOM 属性或将其包装成 Angular 元素（jqLite 元素），例如 angular.element($event.target)。 parentNode 等 DOM 属性很可能就是你想要的。

【解决方案2】：

var position = $event.target.getBoundingClientRect();

var x = position.left; var y = position.top;

$scope.showMenu = function(passedEventObject){
    var position = passedEventObject.target.getBoundingClientRect();
    var passedEventObjectx = position.left;
    var passedEventObjecty = position.top;
    console.log(passedEventObjectx+"=="+passedEventObjecty);
};

【讨论】：