Question

我有以下代码。

HTML

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

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）

$("#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都可以拖动？

Answer 1

有几个问题：

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

Answer 2

Matt说的是真的，但是你可以使用它。问题是你的jQuery函数在Angular完成操作DOM之前运行。

最简单的解决方法是注入Angular $ timeout函数，将代码放在callstack上。

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以查看其有效

Cheerz！

jQuery draggable（）和angular ng-repeat

2 个答案: