jQuery Klon und Append-Funktion funktioniert nicht wie erwartet in AngularJS Direktive

Question

in meiner App Ich versuche, ich baue einen Einkaufswagen. Sie können die App in diesem Codepen sehen: http://codepen.io/summerfreeze/pen/VjqJYW. Es funktioniert fast, aber ich kämpfe mit dem letzten Teil. Ich möchte die Schaltfläche "ADD ORDER LINE" hinzufügen, um weitere Bestellzeilen unter der bestehenden hinzuzufügen. Ich versuche, dies mit jQuery zu tun:

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

Aber das scheint nicht zu funktionieren. Ich wäre dankbar, wenn sich jemand den Code ansehen und mir sagen würde, was ich falsch gemacht habe.

Answer 1

nicht sicher, warum Sie eine Direktive wurden. Ich habe das aus deinem Code entfernt und es funktioniert. Sie haben noch andere Fehler, aber ich schätze, Sie können sich um diese kümmern. Hier ist der Link auf die modifizierte Version

new codepen version

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

Wie die anderen vorgeschlagen, um sauberen Code-Standards zu folgen, bitten wir Sie, mit jQuery-Code in AngularJS, in der Zeit zu Problemen es führen wird.

Answer 2

Von dem, was ich sagen kann, sollten Sie nicht zu #main anhängt, sondern zu #main div[0]