当 tobeclicked 列表被点击时，它会从中获取数据并粘贴到查找空列表中。它实际上需要找到一个空列表并更新它的地方。值和列表将有真实的图像。因此，当单击图像时，它会找到空列表并在那里克隆。我无法更改空列表的结构，因为它将具有要克隆的图像大小的空边框。所以用户可以知道他在哪里添加。
HTML :
<div ng-app='myModule'>
<div class="tobeclicked">
<ul>
<li thisclicked data-value="img1">img 1</li>
<li thisclicked data-value="img2">img 2</li>
</ul>
</div>
<br>
<div class="find-empty">
<ul>
<li class="empty" data-value=""></li>
<li class="empty" data-value=""></li>
</ul>
</div>
</div>
JS
var myModule = angular.module('myModule', []);
myModule.directive("thisclicked", function () {
var thisclicked = function(scope,element,attrs) {
element.bind('click',function(){
var empty = $('.find-empty').find('.empty').first();
empty.html(element.html());
empty.attr('data-value',attrs.value);
empty.removeClass('empty');
});
};
return thisclicked;
});
Fiddle ( http://jsfiddle.net/CQzu5/ ) 是我想做的粗略演示。希望有一种 Angular 方法可以做到这一点。 (请注意， fiddle 不是实际代码，只是我想做的事情的例子。实际代码有调用 Controller 的指令，所以数据基本上是在 Controller 中获取的。我不确定这是否是正确的方法，但我是愿意接受建议。
这张图片应该也有帮助(实际应用):
最佳答案
我不会使用 DOM 来存储您的数据。通过服务从 Controller 访问它。使用两个列表:一个包含基本数据，另一个包含可扩展的“选定数据”。这开启了在每个组的列表上使用 ng-repeat 的能力。
<html ng-app='myModule'>
<div ng-controller='main'>
<div>
<ul>
<li ng-repeat="item in itemService.pickedItems">{{description}}</li>
</ul>
</div>
<br>
<ul>
<li ng-repeat="item in itemService.items" onclick='addToPicked({{item}})'>{{description}}</li>
</ul>
</div>
</html>
和 Controller
function main($scope, itemService) {
$scope.addToPicked = function(item) {
itemService.addToPicked(item);
};
}
现在是 Controller 引用的服务
var myModule = angular.module('myModule', []);
myModule.factory('itemService', function() {
var itemService= {};
itemService.pickedItems = []; //
itemService.items = [
{description:'item 1', imageName:'item1.jpeg'},
{description:'item 2', imageName:'item2.jpeg'},
{description:'item 3', imageName:'item3.jpeg'} ];
itemService.addToPicked = function(item) {
picKedItems.push(item);
};
return itemService;
});
这意味着您的应用将保留这些项目的一份副本，即使它们存在于多个 Controller 中也是如此。
关于javascript - 在 Angular JS 中做同样的更好的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20250575/