jQuery 克隆和附加功能在 AngularJS 指令中没有按预期工作

Posted 2023-02-22

【中文标题】jQuery 克隆和附加功能在 AngularJS 指令中没有按预期工作

【英文标题】：jQuery clone and append function isn't working as expected in AngularJS directive

【发布时间】：2016-12-22 02:26:21

【问题描述】：

在我的应用程序中，我正在尝试构建一个购物车。您可以在此 codepen 中查看该应用程序：http://codepen.io/summerfreeze/pen/VjqJYW。它几乎可以工作，但我正在努力完成最后一部分。我想要“添加订单行”按钮在现有订单行下添加另一个订单行。我正在尝试使用 jQuery 来做到这一点：

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

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

【问题讨论】：

这包含几个语法错误。这是你的完整代码吗？

不要将 jQuery 与 AngularJS 混合使用。我建议你看看docs.angularjs.org/api/ng/directive/ngRepeat。

我同意 @Wawy 作为初学者。其次，检查您要返回的内容。 addline 未定义...

我是 Angular 的新手，我不知道如何在没有 jQuery 的情况下做到这一点。我尝试编写一些代码，但它也没有工作

$SteamDev - addline 如何未定义？这是一个函数。

【参考方案1】：

不确定您为什么使用指令。我从你的代码中删除了它，它可以工作。您仍然有其他错误，但我猜您可以处理这些错误。 这是修改版的链接

new codepen version

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

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

【讨论】：

我很快就会学会用 Angular 来做这件事，谢谢。您的代码确实有效，但请单击几次，看看它添加了多少 div。它倍增。如何避免？

使用 jquery $(".orderline").first().clone().appendTo('.main');中的“.first()”函数

克隆的输入元素不像原来的那样工作（没有自动完成等）

是的，这就是为什么您需要以 Angular 的方式重新考虑该方法，克隆的元素并不是真正动态的。做更多 Angular 练习/示例，直到您了解基础知识，然后您可以将它们应用到您的项目中。

codepen.io/summerfreeze/pen/VjqJYW 试图在 Angular 中做到这一点，我有点迷路了

【参考方案2】：

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