Klon-html-element in angularjs

Ich versuche zu implementieren drag-and-drop-system in angularjs.

Ich will gezogene Objekt geklont werden, auf ziehen beginnen. Allerdings habe ich keine Ahnung, wie um ein element zu Klonen, zusammen mit dem Umfang und verlinkten controller in angularjs?

Irgendwelche Vorschläge?

  • Es gibt Winkel.Kopie für tiefes kopieren, aber ich bin mir nicht sicher, was du meinst mit "...zusammen mit dem it-Bereich und verknüpft controller...".
  • Die "destination" - parameter in Winkel.Klon Berechnungsmethode ist wie folgt definiert: {(Objekt|Array)=} aber ich bin versucht zu Klonen html-element mit Hörer, den Umfang, die Steuerung und alles. Ich will das Klonen von gezogenen html-element (einer Richtlinie).
  • Ich sehe. Vielleicht möchten Sie Bearbeiten Ihre Frage und ersetzen '- Objekt' mit 'element'.
  • ohhh, richtig. thx für die es merken.
InformationsquelleAutor Szymon Wygnański | 2013-03-15
  1. 10

    Klonen von DOM-Elementen, wie es normalerweise gemacht wird, für drag & drop wird nicht empfohlen, mit den Eckigen. Stattdessen duplizieren Sie Ihr Objekt-Modell.

    Lassen Sie uns sagen Sie, dass Sie die Anzeige von Elementen in einem <UL> und haben ein anderes gezogene Element nur sichtbar, während ziehen:

    <ul>
    <li ng-repeat="item in items" class="{{item.shadow}}">{{item.text}}</li>
<ul>
<div ng-show="draggedItem != null">{{draggedItem.text}}</div>

    und in der Steuerung, erstellen Sie eine Kopie des Elements zu ziehen in draggedItem:

    $scope.items = [{text:"First"}, {text:"Second"}];
$scope.shadowItem = null; //Item at the original position
$scope.draggedItem = null; //Clone item being moved

$scope.dragStart = function(item) {
    $scope.shadowItem = item;
    $scope.draggedItem = angular.copy(item);
    item.shadow = "shadow"; //set a CSS class to change its look
    //From now on, the DIV is dragged around
}

$scope.drop = function() {
    //Save the new item position
    $scope.draggedItem = null; //Makes the dragged clone item disappear
    $scope.shadowItem.shadow = ""; //give the item its normal look back
}
    • Was soll ich tun, ist die Schaffung der "Aktionen". Und jede "Aktion" ist anders. So habe ich zum Beispiel UndoAction oder ShowAllAction und so weiter. Alle thous hat, trägt unterschiedliche Funktionalität und unterschiedliche grafische Darstellung (diese sind in verschiedenen Richtlinien). Was ich tun möchte, ist ähnlich ziehbar Fähigkeiten in World of Warcraft. Ich weiß, es ist nicht empfohlen, aber ich sehe keine andere Lösung.
    • Alle Elemente, die Sie verschieben, sind Aktionen. Es spielt keine Rolle, dass Sie unterschiedliche grafische Darstellungen. Sie können innerhalb der <li> alle Darstellungen, jede mit Ihrer conditional-Attribut: ng-show="item.kind=='UndoAction'" für die erste ng-show="item.kind=='ShowAllAction'" für die nächste, usw. Dann können Sie meine oben genannte Methode.
    InformationsquelleAutor Mart
  2. 2

    Ich hatte das gleiche Problem Umhüllung eine Bibliothek, die geklont mein Knoten. Dies ist meine Lösung:

    angular.module('my-module')
.directive('mqAllowExternalClone', function($compile) {
  return {
    link: link,
  };

  function link(scope, elem, attr) {
    var element = elem[0];
    var original = element.cloneNode;
    element.cloneNode = patch;

    function patch(deep) {
      var clone = original.call(element, deep);

      //You can remove this two lines and the result
      //  will be more or less the same.
      //In my case I need it for other reasons
      clone.removeAttribute('mq-allow-external-clone');
      clone.cloneNode = patch;

      $compile(clone)(scope);
      return clone;
    }
  }
});

    https://gist.github.com/amatiasq/ae6fce9acf74589ef36d

    • Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    • Ja, dachte ich, aber die Idee war genau, dass, wenn ich verbessern oder beheben Sie alle Fehler auf, die es den link, wird die Letzte version.
    InformationsquelleAutor A. Matías Quezada
Schreibe einen Kommentar