jQuery的可拖动（）和角度的NG-重复 [英] jQuery's draggable() and angular's ng-repeat

问题描述

我有以下的code。

HTML

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

使用Javascript（角）

Javascript (Angular)

(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的）

Javascript (jQuery)

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

这生成页面上的HTML创建阵列中的每个项目一个div，所以你得到的东西是这样的：

The HTML that this generates on the page creates a div for each item in the array so you get something like this:

<div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable">
  item1
</div>

<div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable">
  item2
</div>

<div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable">
  item3
</div>

但只有第一个是可拖动的。我将如何让这个被生成的每个分区可以拖动？

But only the first one is draggable. How would I make it so each individual div that gets generated can be draggable?

推荐答案

马特说什么是真实的，但有解决方法，你可以使用。
问题是，你的jQuery函数角度做操纵DOM之前运行。

What Matt say's is true, but there is work-around you could use. The problem is that your jQuery function runs before Angular is done manipulating the DOM.

要解决这个问题最简单的办法，就是要注入角$超时功能，将您的code较高的调用堆栈。

The easiest way to fix that, is to inject the Angular $timeout function to place your code higher on the callstack.

HTML（满载头角）：

HTML(Load angular in head):

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

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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！

这篇关于jQuery的可拖动（）和角度的NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！