jQuery克隆和追加功能未按预期在AngularJS指令中运行

Question

在我的应用程序中，我正在尝试构建购物车。 您可以在以下Codepen中看到该应用程序： http ://codepen.io/summerfreeze/pen/VjqJYW。 它几乎可以正常工作，但是我在最后一部分方面很挣扎。 我希望“添加订单行”按钮在现有的订单行下添加另一条订单行。 我正在尝试使用jQuery：

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

但这似乎不起作用。 如果有人能看一下代码并告诉我我犯了什么错误，我将不胜感激。

Answer 1

不知道为什么要使用指令。 我从您的代码中删除了它，并且可以正常工作。 您仍然还有其他错误，但是我想您可以解决这些问题。 这是修改版本的链接

新的Codepen版本

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

正如其他人所建议的那样，为了遵循简洁的代码标准，请不要在AngularJS中使用jQuery代码，否则会导致问题。

Answer 2

据我所知，您不应该附加到#main ，而应该附加到#main div[0]