AngularJS - получение x & y позиций от mouseclick в div

Я сделал функцию, которая должна добавить элемент в позицию, которую я нажал внутри div. Теперь проблема с этой функцией заключается в том, что каждый раз, когда я нажимаю, она принимает позицию x и y документа, а не позицию x и y внутри div. Так что я действительно хочу, то, что верхний левый угол моего div должен давать x = 0 и y = 0, но я не знаю, возможно ли это? И я думаю, есть еще один способ сделать это.

$scope.addOnClick = function(event) {
        $scope.items.push( {
            "label": "Click",
            "value": 100,
            "x": event.x-50,
            "y": event.y-50,
        })
}

Ответ 1

Вам нужно изменить event.x на event.offsetX и event.y на event.offsetY

Вы не добавили определение шаблона, но я добавлю его на всякий случай:

<div ng-click="addOnClick($event)"></div>

Ответ 2

В html файле используйте:

<div (click)="test($event)"></div>

А в функции в файле ts ::

function test(e){
 console.log(e.clientX);
 console.log(e.clientY);
}

Ответ 3

Для тех, кто на angular, которые используют перетаскивание библиотек и хотят, чтобы позиция элемента была перетащена:

<div ng-click="OnDrag($event)"></div>

и в контроллере

$scope.onDrag($event){
      console.log("X ->",$event.originalEvent.pageX,"Y ->",$event.originalEvent.pageY)

 }