Question

我试图获取图片的位置（x; y），在我的文件.js方面，这是我到现在为止所得到的：

圆圈红色是我的可拖动图像，因为你可以看到我无法获得该位置，但是一旦我尝试在角度侧传递这个值，它们就显示为未定义。

这是我的代码：

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>

在我的身边：

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

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

    };

我得到的是：＆＃34;你＆＃34; ＆＃34; U＆＃34; undefined undefined

我希望有人可以帮助我。

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

Answer 1

你可以在角度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;
            });
        }
    });
});

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

1 个答案: