在 AngularJS 中获取图像位置 (x;y)

Question

我正在尝试获取图像的位置 (x;y)，在我的 file.js 一侧，这是我到目前为止得到的结果：

红色圆圈中是我的可拖动图像，如您所见，我能够获得该位置，但是一旦我尝试在 angular 侧传递此值，它们就会显示为未定义。

这是我的代码：

html 边:

 <div ng-show="visible1" style="display: block;left: 20px;">

    Nom:<input ng-model="nameW" required></br>
    lieu: <input ng-model="locName" required></br>
    x:<div id="posX" ng-model="locX" ></div></br>
    x:<input   id="posXinput" ng-model="locXI" ></input></br>
    y:<div id="posY" ng-model="locY" ></div></br>
    y:<input  id="posYinput"   ng-model="locYI" ></input></br>
    <button ng-click="update(nameW,locName,locXI,locYI)">Valider</button>

</div>
</div >
<div style="bottom: 30px;left: 30px;position: absolute;">

<img src="pages/resources/img/téléchargement.jpg" draggable="true"   id="draggable" class="ui-widget-content" style="max-height: 20px;position: absolute;">

<img id="box" src="pages/resources/img/skyrim-map-by-mottis86-lg.jpg" style="max-width: 50%">
</div>
</div>

<script type="text/javascript" >

     $(function() {
    $("#draggable").draggable({
        containment: "#box",
        scroll: false,
        drag: function(event) {
            var top = $(this).position().top;
            var left = $(this).position().left;

            $('#posX').text(left);
            $('#posXinput').val(left);
            $('#posY').text(top);
            $('#posYinput').val(top);
        }
    });
});
</script>

在我的 js 端：

 $scope.update = function (name,locName,locX,locY) {

        console.info(name,locName,locX,locY);

    };

我得到的是："u" "u" undefined undefined

希望有人能帮助我。

对不起我的英语，它不是我的母语。

Answer 1

您可以在 angular js 文件中移动您的函数并在范围内赋值

    $scope.update = function (name, locName, locX, locY) {
        console.info(name, locName, locX, locY);
    };
    $(function () {
        $("#draggable").draggable({
           containment: "#box",
           scroll: false,
           drag: function (event) {
               var top = $(this).position().top;
               var left = $(this).position().left;        
               $('#posX').text(left);
               $scope.locXI = left;
               $('#posY').text(top);
               $scope.locYI = top;
           }
       });
   });

而且您还可以在 JavaScript 中使用 angular 范围，而无需像这样移动到 angular 文件

$(function () {
    $("#draggable").draggable({
        containment: "#box",
        scroll: false,
        drag: function (event) {
            var top = $(this).position().top;
            var left = $(this).position().left;

            $('#posX').text(left);
            $('#posXinput').val(left).change();
            var scope = angular.element($("#posXinput")).scope();
            scope.$apply(function(){
                scope.locXI = left;
            });
            $('#posY').text(top);
            $('#posYinput').val(top).change();
            var scope = angular.element($("#posYinput")).scope();
            scope.$apply(function(){
                scope.locYI = top;
            });
        }
    });
});

在 AngularJS 中获取图像位置 (x;y)

Get image position(x;y) in AngularJS

jquery

jquery-ui

draggable

angularjs