jQuery draggable() 和角度 ng-repeat答案

【问题标题】：jQuery's draggable() and angular's ng-repeatjQuery draggable() 和角度 ng-repeat
【发布时间】：2014-03-26 18:32:57
【问题描述】：

我有以下代码。

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" 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>

但只有第一个是可拖动的。我将如何使它生成的每个单独的 div 都可以拖动？

【问题讨论】：

标签： jquery html angularjs jquery-ui

【解决方案1】：

几个问题：

ID 是唯一的。不要重复带有 id 的元素，只需使用类
您在角度渲染之前运行 jQuery 选择器，因此您只选择初始 DOM 元素，而不是其他元素。
您应该通过 link 函数在 Angular 指令中进行 DOM 操作

【讨论】：

【解决方案2】：

Matt 说的是真的，但是您可以使用一些变通方法。问题是您的 jQuery 函数在 Angular 完成对 DOM 的操作之前运行。

解决这个问题的最简单方法是注入 Angular 的 $timeout 函数，将代码放在调用堆栈的更高位置。

HTML（在头部加载角度）：

<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 here 来查看它的工作原理

干杯！

【讨论】：