克隆angularjs中的html元素

Question

我正在尝试在angularjs中实现拖放系统.

我想在拖动开始时克隆拖动的对象.但是我不知道如何在angularjs中克隆元素及其范围和链接控制器？

有什么建议？

Answer 1

Angular不推荐克隆DOM元素,因为它通常用于拖放操作.相反,克隆您的对象模型.

假设您在一个项目中显示项目,<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
}