Question

寻找大师的帮助，我在下面的代码中的重复列表中使用angularJS。如何获得absoulute位置或相对于顶部和左侧偏移位置的文档，以获得＆＃39; div class =＆＃34; section＆＃34;＆＃39;并在控制台中打印？是否可以使用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;
    };
});

Answer 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;
};

检查＆＃34;参数＆＃34; ng-clickdocumentation。

的部分

然后点击the $event page，即

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

（突出我的）

jQuery Event Object显示两个属性。

<强>更新

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

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

Answer 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);
};

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

2 个答案: