javascript - 根据 offSet 更改 top 和 left 属性

Question

好吧，我想要实现的是，每次我单击页面中的元素时，我在 div 上的 top 和 left 属性都会更新，Div 会使用鼠标所在的属性进行更新。

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

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

ng-click="mapCurrentPerson($event)"

我在我的 Controller 中有这个函数，我在其中记录 $event 的偏移量，将它绑定(bind)到一个变量并尝试使用 ng-style 属性更新页面中的变量

        $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 样式上效果很好，但是无论我尝试什么，当我更改范围属性时它都不会更新

Answer 1

尝试使用

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