angular.js動的挿入domノードの削除

angular.jsは次世代のweb開発フレームワークであり、簡単にwebフロントエンドでMVCモードを実現した.jqueryモードに比べて、開発者が直接domを操作する必要はない.
先端開発としてdomを操作しないのは冗談だ!そう、確かにそうです.angularについてjsの詳細と事例はブログでangularを検索してください.js 
 
angularに言及した以上jsの下でユーザーが直接domを操作する必要はありません.コンパイル間欠domと制御層modelで双方向バインドを実現しました.一方が変更し、他方がすぐに変更します.その問題が来ました.テキストボックスとボタンを挿入したいです.テキストボックスのデータは制御層の属性とバインドしなければなりません.ボタンはng-clickイベントを実現します.どうすればいいですか.
 
従来の実装方法では、親ノードにdomを直接追加し、htmlラベルのイベントも自動的に登録する.
 
angular.js実装方法:親ノードにノードを追加する後、配列オブジェクト(ng-clickなどのangular.js命令を含む)を現在の役割ドメインにバインドする再コンパイルが必要である.バインド後の対応angular.js命令が有効になる.
前提は次のとおりです.
domノードを挿入する後、angularを呼び出すには$compileサービス(呼び出す前に注入に依存)を手動で呼び出す必要がある.js命令とモデルバインドが有効になる.次のようなコードがあります.

$('div[name=father]').html(
  $compile('<input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" /><a ng-show="$index!=0" style="color:red;" ng-click="del($index)">  </a>'
  )(scope)
);

$compileサービスがないと、上に挿入したdomを現在の役割ドメインにバインドできないことは明らかである.しかし、このような綴り方は挫折しているように見えます.angularと言いました.jsはモデルとコントローラで双方向バインドを実現する.この不倫のjqueryコードは本当に少し鶴立鶏群の感じがします.
 
次に第2の案を簡単に紹介する.
ng-repeat
これはangularです.jsの反復命令ですaspに触れたことがありますNetなら、repeatコントロールはきっとよく知っているでしょう.彼らの機能は似ていて、すべて1つの集合の中から、要素を遍歴してUIに反復して展示されています.
ng-repeatで反復すればangularをjsのイベントは現在の役割ドメインにバインドされますか?
はい.
ng-repeatは実装上$compileサービスを自動的に実行するためである.
これでずいぶん手間が省けました.私たちが唯一注目しなければならないのはモデルです.
たとえばvar list=[{id:100,age:30,name:「張三」}]のような配列コンテナを反復データセットとして使用する.

            <div ng-repeat="person in list">
                <input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" />
                <a ng-show="$index!=0" style="color:red;" ng-click="del($index)">  </a>
            </div>
            <a ng-click="add()">    </a>

コントローラ応答の必要に応じてadd()方法とdel(idx)方法を実現する.

$scope.add=function(){
    var obj={id:101,age:30,name:"  "};
    $scope.list.push(obj);
}

$scope.del=function(idx){
    $scope.list.splice(idx,1);
}

 
OK、domノードを動的に追加/削除できます.