画像位置（x、y）を取得し、私は画像の位置（x、y）を取得しようとしているangulajs

Question

で、私のfile.js側には、ここで私が今まで得たものです：

丸で囲まれた赤色は私のドラッグ可能なイメージです。私はポジションを得るのが大好きでしたが、一度角度の側でこの値を渡そうとすると、それらは未定義として表示されます。ここ

は私のコードです：

のhtml側：私のJS側の

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

    }; 

は： "U" "U" 不定不定

誰かが私を助けてくれることを願っています。

私の英語のために申し訳ありません、私の母国語ではありません。

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; 
      } 
     }); 
    }); 

に値を与え、あなたも答えるため、この

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