JQuery draggable() и угловой ng-repeat

У меня есть следующий код.

HTML

<div ng-repeat="item in canvasElements" id="declareContainer">
 {{item}}
</div>

Javascript (угловой)

(function(){

 //angular module
 var dataElements = angular.module('dataElements', ['angularTreeview','ngResource']);

 //test controller
 dataElements.controller('myController', function($scope,$resource){

 $scope.nodeClicked = function(node){
 alert(node.roleName);
 }

 $scope.canvasElements = ['item1', 'item2', 'item3'];

 });

})();

Javascript (jQuery)

$("#declareContainer").draggable({curosr: "move"});

HTML, который создается на странице, создает div для каждого элемента массива, поэтому вы получаете что-то вроде этого:

<div ng-repeat="item in canvasElements" id="declareContainer">
 item1
</div>

<div ng-repeat="item in canvasElements" id="declareContainer">
 item2
</div>

<div ng-repeat="item in canvasElements" id="declareContainer">
 item3
</div>

Но только первый перетаскивается. Как я могу сделать так, чтобы каждый отдельный div, который генерируется, можно перетаскивать?

2 ответа

То, что Мэтт говорит, правда, но есть работа, которую вы можете использовать. Проблема в том, что ваша функция jQuery работает до того, как Angular выполнит манипулирование DOM.

Самый простой способ исправить это, заключается в том, чтобы ввести функцию Angular $ timeout, чтобы поместить ваш код выше в стек вызовов.

HTML (Угловая нагрузка на голову):

<div ng-app="dataElements" ng-controller="myController">
 <div ng-repeat="item in canvasElements">
 {{item}}
 </div>
</div>

JS:

(function(){
 //angular module
 var dataElements = angular.module('dataElements', []);

 //test controller
 dataElements.controller('myController', function($scope, $timeout){

 $scope.canvasElements = [
 "item1", 
 "item2",
 "item3"
 ];

 $timeout(function(){ { //Move code up the callstack to tell Angular to watch this
 $(".declareContainer").draggable();
 });
 });
})();

Я создал здесь JSFiddle, чтобы увидеть, как он работает

Cheerz!


Несколько вопросов:

  1. Идентификаторы уникальны. Не повторяйте элемент с id, просто используйте классы
  2. Вы запускаете селектор jQuery перед угловым рендерингом, поэтому вы выбираете только начальный элемент DOM, а не другие.
  3. Вы должны выполнять манипуляции с DOM в рамках угловой директивы через функцию link

licensed under cc by-sa 3.0 with attribution.