anglejsを使用してdivを1つのdivに追加する方法

Question

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

クリックボタンをクリックすると、メインdiv内に1つのdivを追加します。私はそれぞれのクリックごとに1つの新しいdiv（動的に）を追加したい。また、私は子供divが存在するかどうかを見つけたい。

私はjqueryの中で次のように行います

$('main').append(); 

私は（APPEND内のdivを通過します）。

しかし、angular..jsを使用して行う方法は？

Answer 1

上に読む

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

は解決策かもしれないが、それはまだjQueryのに近すぎるのです。あなたがアンギュラで遊ぶとき、あなたは異なって考える必要があります。

jQueryは手続き型です。

1 - 私は、DOM内の要素を見つけています

2-私はいくつかのもの

3 - 私は

角度DOM内の要素を更新、削除、追加していをしていますが、宣言され

• はあなたのデータ定義

• あなたがあなたのデータで遊んでいるとき、ビューがある

  • ...そして

  （..など、NG-繰り返し、NG-クラスを使用して）あなたのデータを表示する方法を定義します自動的に更新します。

あなたは、角で正しく再生したい場合は、おそらくのような何かをする必要があります。

テンプレート：

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

コントローラ：あなたは[angular.elementに精通

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

Answer 2

DOM操作用のディレクティブを作成するのが一般的です（ディレクティブの他の多くの用途も）。

ディレクティブ内ではangular.elementにアクセスできます。 jQueryがページのangular.jsの前にインストールされている場合、これはjQueryオブジェクトです。それ以外の場合は、多くのjquery互換メソッドを持つjqLiteオブジェクトです。

非常に簡単な例：ディレクティブを使用してディレクティブとangular.element