jQuery插件和角度重复

Question

给定一个jQuery插件,在一个由呈现的元素列表上初始化它的最简洁方法是ng-repeat什么？

例如,我想制作一个可拖动的单词列表.在控制器中,我从API中获取列表:

$scope.words = Words.get(...)

在视图中我迭代它们:

<article ng-controller="WordsCtrl">
    <div class="word" ng-repeat="word in words">
        {{word}}
    </div>
</article>

剩下的就是运行插件初始化代码,如:

$(elem).children('.word').draggable()

但这需要在范围内的每次更改后运行.这是怎么回事？

Answer 1

如果您使用 jQuery，您可以创建一个简单的jqDraggable指令来调用.draggable()：

app.directive('jqDraggable', function () {
  return {
      restrict: 'A',
      link: function (scope, elm, attr) {
          elm.draggable();
      }
  };       
});

然后你会这样做：

<article ng-controller="WordsCtrl">
    <div jq-draggable="true" class="word" ng-repeat="word in words">
        {{word}}
    </div>
</article>

当您进行更改时，这也应该起作用$scope.words。

这是一个示例 plunker：
http://plnkr.co/edit/ywWifeNPcTFYTYFMI2Of ?p=preview