jQuery 플러그인 및 각 반복

Question

jQuery 플러그인을 사용하면 ng-repeat에 의해 렌더링 된 요소 목록에서 가장 깨끗한 방법은 무엇입니까?

예를 들어, 나는 draggable 단어의 목록을 만들고 싶습니다.

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

을 그리고보기에 내가 그들에 반복 : 컨트롤러에서 나는 API에서 목록을 왼쪽 무엇

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

:

<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

가장 좋은 방법은 반복 된 항목을 포함하는 상위 요소에 지시문을 만드는 것입니다. 그런 다음 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/#/

에 대한 끝났다

그래서 거기에 앉아 아이템을보고 변경하면 draggable을 적용 할 수 있습니다

,