Angularjs Direktive Attribut Bindung Links/top-Positionen nach dem ziehen mit ng-repeat

Ich bin neu in Eckig und haben versucht, erstellen Sie eine Richtlinie, die binden die position auf ein element zu einem Modell, nachdem es gezogen wurde, durch den Benutzer. Ich fand einen anderen Stack Overflow Frage, was löst das für ein einfaches Objekt:

Angularjs Direktive Attribut Bindung von left und top die position nach dem ziehen

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope[attrs.xpos] = ui.position.left;
                    scope[attrs.ypos] = ui.position.top;
                    scope.$apply();
                }
            });
        }
    };
});

Sehen Fiddle Lösung hier: http://jsfiddle.net/mrajcok/5Mzda/

Nun, ich bin jetzt versuchen, diese Arbeit mit einem komplexeren Objekt und mit ng-repeat, aber kann nicht scheinen, um herauszufinden, warum es nicht funktioniert.

Hier ist mein HTML:

<div ng-controller="MyCtrl">
  <div ng-repeat="position in positions">
      <input type="number" ng-model="position.divleft"/>
      <input type="number" ng-model="position.divtop"/>
      <p draggable class="example" ng-style="{left: position.divleft, top: position.divtop}" xpos="position.divleft" ypos="position.divtop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Und hier ist die JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.positions = [
      {"divtop": 80,
       "divleft": 200
      },
      {"divtop": 100,
       "divleft": 250
      }
  ];
};

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope[attrs.xpos] = ui.position.left;
                    scope[attrs.ypos] = ui.position.top;
                    scope.$apply();
                }
            });
        }
    };
});

Ist hier das Fiddle:

http://jsfiddle.net/5Mzda/19/

Ich kann nicht scheinen, um zu sehen, was falsch mit dem code. Würde jede Hilfe dankbar!

UPDATE

Ich lese die Kommentare genauer in der ursprünglichen Frage, und es sieht aus wie mit $eval funktioniert:

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope.$eval(attrs.xpos + '=' + ui.position.left);
                    scope.$eval(attrs.ypos + '=' + ui.position.top);
                    scope.$apply();
                }
            });
        }
    };
});

Nicht sicher ob es ein eleganter Weg, dies zu tun, aber es scheint, die Bindung arbeitet jetzt richtig!

InformationsquelleAutor Chanpory | 2013-03-18
Schreibe einen Kommentar