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



尋求上師幫助,我在下面的代码中的重复列表中使用了 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;
    };
});

ng-click 中,你会得到一个可以传递给你的方法的$event对象。

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

该事件有两个属性 pageXpageY ,这可能是您想要的。

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

查看ng-click文档的"参数"部分。

然后点击进入$event页面,上面写着

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

(突出显示我的)

jQuery 事件对象显示这两个属性。

更新:

这将为您提供鼠标的 X 和 Y,这与单击时模态定位的用例非常相关,因为为了更准确,您可以尝试其他方法:

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

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

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

最新更新