plug-in jQuery e ripetizione angolare

Question

Dato un plug-in jQuery, qual è il modo più semplice per inizializzarlo su un elenco di elementi resi da ng-repeat?

Ad esempio, desidero creare un elenco di parole trascinabili. Nel controllore prendo l'elenco dal API:

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

E nella vista i iterare su di loro:

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

Ciò che resta è quello di eseguire il codice del plugin di inizializzazione, come in:

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

Ma questo deve essere eseguito dopo ogni modifica dell'ambito. Dove va questo?

Answer 1

Se si utilizza jQuery, è possibile creare un semplice direttiva jqDraggable che chiamerà .draggable():

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

Si potrebbe quindi fare:

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

Questo dovrebbe funzionare anche quando il vostro $scope.words modifiche.

Ecco un plunker campione:
http://plnkr.co/edit/ywWifeNPcTFYTYFMI2Of?p=preview

Answer 2

il modo migliore per farlo è creare una direttiva sull'elemento padre che ospita gli elementi ripetuti. Quindi crei un'espressione di $ watch che osserva l'ambito della ng-repeat e se cambia si applica .dragable sui suoi figli.

Ecco un plugin già fatto per voi

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

per rispondere alla tua domanda di guardare il campo di applicazione anche se qui è un esempio roughe:

vostro elemento sarà simile:

<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 
     } 
    } 
} 
}); 

quindi siederà lì e guarderà gli oggetti e potrai applicare trascinabile quando cambia