javascript - jQuery 插件和 Angular 重复

Question

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

例如，我想制作一个可拖动的单词列表。在 Controller 中，我从 API 中获取列表:

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

在 View 中我对它们进行了迭代:

<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