13 
 <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 呢？

4

2 回答 2

25

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

jQuery 是程序化的。

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

2-我正在做一些事情

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

角度是声明性的

  • 你定义你的数据

  • 您定义数据的显示方式（使用 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'});
    }
}
于 2013-10-29T12:37:15.007 回答
15

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

在指令中，您可以访问angular.element. 如果 jQuery 安装在页面中的 angular.js 之前，这是一个 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

于 2013-10-29T12:25:14.250 回答