jQuery clone and append function isn't working as expected in AngularJS directive

Question

in my app I'm trying I'm building a shopping cart. You can see the app in this codepen: http://codepen.io/summerfreeze/pen/VjqJYW. It's almost working, but I'm struggling with the last part. I want the "ADD ORDER LINE" button to add another order lines under the existing one. I'm trying to do this using jQuery:

  myApp.directive('myDirective', function($scope) {
    $scope.addline = function() {
      $(".orderline").clone().appendTo('.main');
    };
    return addline();
  });

But this doesn't seem to work. I would be grateful if someone would look at the code and tell me what mistake did I make.

Don't mix jQuery with AngularJS. I suggest you have a look at docs.angularjs.org/api/ng/directive/ngRepeat. — Wawy
– Wawy, Commented Aug 15, 2016 at 20:38
I agree with @Wawy for starters. Secondly, check what you're returning. addline is undefined... — SteamDev
– SteamDev, Commented Aug 15, 2016 at 20:44
I'm new to Angular and I have no idea how to do this without jQuery. I tried to code something, but it didn't work either — summerfreeze
– summerfreeze, Commented Aug 15, 2016 at 20:44

Marius P. · Accepted Answer · 2016-08-15 20:57:43Z

1

Not sure why you were using a directive. I removed that from your code and it works. You still have other errors, but I'm guessing you can attend to those. Here's the link to the modified version

new codepen version

   $scope.addline = function(){
    $(".orderline").clone().appendTo('.main');
  };

As the others suggested, in order to follow clean code standards, please refrain from using jQuery code in AngularJS, in time it will lead to problems.

answered Aug 15, 2016 at 20:57

Marius P.

2976 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

summerfreeze Over a year ago

I will surely learn to do this with Angular soon, thank you. Your code does work, but please click few times and see how many divs it adds. It multiplies. How to avoid that?

Marius P. Over a year ago

use the ".first()" function from jquery $(".orderline").first().clone().appendTo('.main');

summerfreeze Over a year ago

the cloned input lements don't work as the original one (no autocomplete etc)

Marius P. Over a year ago

Yes, that's why you need to rethink the approach in an Angular way, cloned elements are not really dynamic. Do more Angular exercises/examples until you understand the basics and then you can apply them in your project.

summerfreeze Over a year ago

codepen.io/summerfreeze/pen/VjqJYW trying to do that in Angular, bit i'm lost

Buddy · Accepted Answer · 2016-08-15 20:40:51Z

0

From what I can tell, you shouldn't be appending to #main, but to #main div[0]

edited Aug 15, 2016 at 20:40

Buddy

11k5 gold badges47 silver badges63 bronze badges

answered Aug 15, 2016 at 20:38

Xavier J

4,7911 gold badge16 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery clone and append function isn't working as expected in AngularJS directive

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related