jQuery प्लगइन और कोणीय दोहराना

Question

एक jQuery प्लगइन दिया गया, ng-repeat द्वारा प्रदान किए गए तत्वों की सूची पर इसे शुरू करने का सबसे साफ तरीका क्या है?

उदाहरण के लिए, मैं शब्दों को खींचने योग्य शब्दों की सूची बनाना चाहता हूं। नियंत्रक में मैं एपीआई से सूची ले:

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

और ध्यान में रखते हुए मैं उन पर पुनरावृति:

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

क्या छोड़ दिया है में की तरह, प्लगइन initialisation कोड को चलाने के लिए है:

$(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

Answer 2

ऐसा करने का सबसे अच्छा तरीका माता-पिता तत्व पर निर्देश बनाना है जो दोहराए गए आइटमों को घर बनाता है। फिर आप एक $ घड़ी अभिव्यक्ति बनाते हैं जो एनजी-दोहराने के दायरे को देखता है और यदि यह बदलता है तो आप इसे लागू करते हैं। इसके बच्चों पर ड्रैगगेबल।

यहाँ एक प्लगइन पहले से ही के लिए आप

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

किया है गुंजाइश देखने के बारे में आपके प्रश्न का उत्तर है, हालांकि यहां एक roughe उदाहरण है:

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

:

अपने तत्व प्रकार दिखाई देगा

तो यह वहां बैठेगा और आइटम देखेगा और जब आप

बदलते हैं तो आप ड्रैगगेबल लागू कर सकते हैं