angularjs - Clone html element in angularjs

Question

I'm trying to implement drag and drop system in angularjs.

I want dragged object to be cloned on drag start. However I have no idea how to clone an element along with it's scope and linked controller in angularjs?

Any suggestions?

Answer 1

ドラッグ アンド ドロップで通常行われる DOM 要素の複製は、Angular では推奨されません。代わりに、オブジェクト モデルを複製します。

に項目を表示し、<UL>ドラッグしている間だけ別のドラッグされた項目を表示するとします。

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

コントローラーで、アイテムのコピーを作成して 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
}

Answer 2

ノードのクローンを作成したライブラリをラップする同じ問題がありました。これが私の解決策です：

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