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:
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!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Diese gut aussieht.
Müssen Sie führen alle Winkel verbundene Ausdrücke in den eckigen Rahmen. Im Falle der dom-event-Handler und Methoden die aufgerufen werden, von außerhalb der event-Handler, die Sie benötigen, führen Sie Sie mit in die eckige mit $gelten, der ausgeführt wird, der Ausdruck und rufen Sie dann $digest die wiederum rufen die angeschlossenen Uhren.
Die einzige änderung, die Sie machen müssen, ist, bewegen Sie den Anweisungen im
$apply()
Demo: Fiddle