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のを使用している場合は、.draggable()を呼び出しますシンプルjqDraggableディレクティブを作成することができます：あなたは、その後どうなる

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

を：ときあなた$scope.words変更

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

これも動作するはずです。ここで

はサンプルplunkerです：
http://plnkr.co/edit/ywWifeNPcTFYTYFMI2Of?p=preview

Answer 2

これを行う最善の方法は、繰り返し項目を格納する親要素に指示文を作成することです。 ng-repeatの範囲を監視する$ watch式を作成し、それが変更された場合はその子に.draggableを適用します。

<div draggable="items"> 
    <div ng-repeat="item in items"></div> 
</div> 

app.directive('draggable',function(){ 
return { 
    restrict: 'A', 
    link: function($scope,$elem,$attrs){ 
     $scope.$watch($attrs.draggable,function(nv,ov) { 
     //the scope of repeat has changed do something here 
     } 
    } 
} 
}); 

：

は

あなたの要素は次のようになります。ここroughe例ですけれども、ここで

は、プラグインがすでにスコープを見てについてのご質問にお答えします

http://codef0rmer.github.io/angular-dragdrop/#/

のために行われています

ですので、そこに座ってアイテムを見て、変更するとドラッグ可能にすることができます