How to Encapsulate jQuery code in a Custom Directive

Asked Sep 17 '17 at 10:44

Active Sep 17 '17 at 15:53

Viewed 160 times

JQuery does not grab the ng-repeat elements

Hi I am trying to make drag and drop and the problem is that JQuery does not grab the ng-repeat elements. If I add the item statically it works, but if the item came out of the loop it no longer works.

index.js

<div ng-repeat="list in lists">
  <div class="column">
    <div class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
  </div>
</div>

<div class="column">
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>

<script src="/javascripts/draganddrop.js"></script>
</body>
</html>

drag and drop script:

https://gist.github.com/anonymous/a571165b46a1a86a6ec34adabe1f928f

edited Jun 20 '20 at 09:12

Community

asked Sep 17 '17 at 10:44

Bartłomiej Flis

2

try not to use jQuery and angularjs together – Manoj Suthar Sep 17 '17 at 10:51
but i need to display the items so i need to use the angularjs loop and then i want these items to be able to move so i have to use this together maybe? – Bartłomiej Flis Sep 17 '17 at 10:57
1

jQuery that manipulates the DOM should be encapsulated in a [custom directive](https://docs.angularjs.org/guide/directive) so that it is executed when the AngularJS framework [ng-repeat directive](https://docs.angularjs.org/api/ng/directive/ngRepeat) instantiates the element. – georgeawg Sep 17 '17 at 10:57
Hey, thanks!, could you tell me how to do, i'm green i want to learn – Bartłomiej Flis Sep 17 '17 at 11:02
Also check this, it could be much better solution for what you're trying to achieve: https://github.com/marceljuenemann/angular-drag-and-drop-lists – pegla Sep 17 '17 at 11:03
1

First of all, this isn't **index.js** but **index.html**, and second - I recommend [ui-sortable](https://github.com/angular-ui/ui-sortable) for angularjs application – Alon Eitan Sep 17 '17 at 11:09
@georgeawg Could you tell me how to do ?? – Bartłomiej Flis Sep 17 '17 at 11:13
@pegla This is based only on json? – Bartłomiej Flis Sep 17 '17 at 11:14

How to Encapsulate jQuery code in a Custom Directive

JQuery does not grab the ng-repeat elements

0 Answers0