CODEWITHSUNDEEP
javascriptjqueryangularjsangular-directive
summerfreeze
summerfreeze

Reputation: 237

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

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.

Upvotes: 0

Views: 183

Answers (2)

Marius P.
Marius P.

Reputation: 297

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.

Upvotes: 1

Xavier J
Xavier J

Reputation: 4644

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

Upvotes: 0

Related Questions