如何使用AngularJS将一个div添加到另一个div中

Question

 <div data-ng-controller="maincontrol">
   <div class="main">
   </div>
  <button data-ng-click="submit()">click</button>
 </div>

当我点击按钮时，我想在主div中添加一个新的div。每次点击都要动态添加一个新的div，并查找子div是否存在。

我会用jQuery这样做：

$('main').append();

我将在 append() 函数中传递 div。

但是如何使用 Angular.js 实现呢？

- silvesterprabu

---

你熟悉angular.element吗？ - Beterraba

Answer 1

使用指令可能是一种解决方案，但它仍然太接近jQuery。当你使用Angular时，你必须思考不同的方式。

jQuery是过程式的。

1- 我在dom中查找一个元素

2- 我做一些操作

3- 我在dom中添加、删除、更新元素

Angular是声明式的

• 你定义你的数据

• 你定义如何显示你的数据（使用ng-repeat、ng-class等）

然后..

• 当你处理你的数据时，视图会自动更新。

如果你想正确地使用angular，你应该像这样做：

模板:

 <div class="main">
    <div ng-repeat="stuff in stuffs"><h1>{{stuff.title}}</h1> <p>{{stuff.content}}</p></div>
 </div>

控制器：

function MainCtrl() {
    $scope.stuffs = [];
    $scope.submit = function() {
       $scope.stuffs.push({title: 'Hello', content: 'world'});
    }
}

- Luc

---

这可能是一篇旧帖子，但它并没有回答问题！问题更多地涉及添加HTML元素而不是项目列表！ - Dileep Mettu

我认为这个答案是使用Angular的一种非常聪明的方式。谢谢！ - SKYnine

Answer 2

通常最好为DOM操作创建指令（指令还有许多其他用途）。

在指令中，您可以访问 angular.element。如果在页面中先安装了jQuery再安装angular.js，则它是一个jQuery对象，否则它是具有许多与jQuery兼容方法的jqLite对象。

非常简单的示例：

 <button data-ng-click="submit()" my-directive>click</button>

app.directive('myDirective',function(){
     return function(scope, element, attrs){
          element.click(function(){
               element.parent().find('.main').append('<div>Some text</div>')
           })
      }
})

阅读指令和angular.element的相关文档。

- charlietfl