Bildposition Get (x; y) in angulajs

Question

Ich versuche, ein Bild der Lage zu bekommen (x; y), in meiner file.js Seite, dann ist hier, was ich bis jetzt stand auf:

In rot eingekreist ist mein ziehbares Bild, wie Sie sehen können, war ich in der Lage, die Position zu bekommen, aber sobald ich versuche, diese Werte in der eckigen Seite zu übergeben, zeigen sie als undefiniert.

hier ist mein Code:

html-Seite:

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

in meiner js Seite:

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

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

    }; 

Was ich erhalte, ist: "u" "u" undefined undefined

Ich hoffe, dass mir jemand helfen kann.

Entschuldigung für mein Englisch, es ist nicht meine Muttersprache.

Answer 1

können Sie Ihre Funktion in Winkel js Datei verschieben und geben Wert in Umfang

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

Und Sie können auch Winkel Umfang in JavaScript ohne Bewegung zu Winkel Datei wie folgt

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