Javascript 基于偏移更改“顶部”和“左侧”特性

我想要实现的是，每当我点击页面中的某个元素时，div的左上角的属性都会得到更新，并使用鼠标所在的属性更新div

现在我不知道为什么这不起作用

我有一个简单的一个大div，里面有很多重复的元素，其中有一个ng click函数

ng-click="mapCurrentPerson($event)"

我的控制器中有这个函数，我记录$event的偏移量并将其绑定到一个变量，然后尝试使用ng样式属性更新页面中的变量

        $scope.currentX = 0;
        $scope.currentY = 0;

        $scope.mapCurrentPerson = function(event) {

            var x = event.offsetX;
            var y = event.offsetY;

            console.log('x: ' + x + ', y: ' + y);

            $scope.$watch('currentX', function(newValue, oldValue) {
                console.log(newValue, oldValue);
                $scope.currentX = '' + x + 'px';
            });

            $scope.$watch('currentY', function(newValue, oldValue) {
                console.log(newValue, oldValue);
                $scope.currentY = '' + y + 'px';
            });

        }

以及我的html，其中div需要根据单击属性进行更新

<div class="current-person"
         ng-style="{'top': currentX,
                    'left':currentY}">
        <!--<img src="{{ current.photo }}" class="current-photo">-->
    </div>

$scope.currentX和Y的开头在NG样式上工作得很好，但无论我尝试使用什么，当我更改范围属性时，它都不会得到更新

$scope.coordinates={};
$scope.coordinates.currentX=0;
$scope.coordinate.currentY=0;

---

可能是

ng样式

您不仅应该使用数字，还应该使用

px

。我正试图从控制器获取px，$scope.currentY=''+y+'px'；。要检查它是否真的重要

top

属性应该是

position:absolute

。或者改用

margintop

。我创建了JSFIDLE，它对我很有用。请结帐，让我们看看。