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？

Answer 1

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

jQuery是程序性的。

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

2-我正在做一些事情

3-我正在添加，删除，更新dom中的元素

angular是声明性的

您定义数据
您可以定义数据的显示方式（使用ng-repeat，ng-class等）。

然后..

当您使用数据时，视图会自动更新。

如果你想用角度正确地玩，你应该做类似的事情：

模板：

 <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'});
    }
}

Answer 2

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

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

很简单的例子：

 <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

如何使用angularjs将div附加到一个div中

2 个答案: