在AngularJS中获取图像位置（x;y）

Posted 2023-05-08

【中文标题】在AngularJS中获取图像位置（x;y）

【英文标题】：Get image position(x;y) in AngularJS

【发布时间】：2017-06-25 22:38:49

【问题描述】：

我正在尝试在我的 file.js 端获取图像的位置（x;y），这是我到现在为止的结果：

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

这是我的代码：

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

我希望有人可以帮助我。

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

【参考方案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 中使用角度范围，而无需像这样移动到角度文件

$(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;
            );
        
    );
);

【讨论】：

感谢您这么快回答，如果我直接使用 $scope.locXI 和 $scope.locYI 就可以了：console.info(name,locName, $scope.locXI,$scope.locYI);