AngularJS動的に作成された要素を使用した投稿

Question

私はAngularJSに少し新しく、データを投稿するのにちょっとした手助けが必要です。私は各入力ボックスのkeypressに新しい入力ボックスを作成しています。ユーザーが追加ボタンをクリックすると、anglejs経由でdbにデータをポストします。私の最初の入力ボックスは正常にデータをdbに投稿しますが、次の入力ボックスはng-clickでは何も行いません。

は、ここに私のHTMLです：

<div id="divAddRow" class="row" ng-app="GroupApp"> 
    <div class="col-lg-8" ng-controller="GroupCtrl"> 
      <div id="row1" class="input-group input-group-lg addGroup w3-animate-bottom"> 
        <input class="form-control input-lg txtAddGroup" ng-model="group.GroupName" placeholder="Group Name..." /> 
        <span class="input-group-btn"> 
         <button id="btn" type="button" ng-click="AddGroup();" 
          class="btn btn-success btn-flat"><i class="fa fa-plus"></i></button> 
        </span> 
      </div> 
    </div> 
</div> 

私は動的に最初のdivのクローンを（）を使用してコントロールを作成するのはここです：ここで

$(document).on('keydown', '.txtAddGroup', (function (e) { 
      //this function clones the parent group and if one below it does not exist, it adds it to the DOM 
      var currentRowNum = $(this).parent().attr('id').replace(/row/, ''); 
      var nxtRowNum = parseInt(currentRowNum, 10) + 1; 
      if ($('#row' + nxtRowNum).parent().length === 0) { 
       $('div.addGroup:last').after($('<br/>').add($('div.addGroup:first').clone().prop('id', 'row' + nxtRowNum)));     
       $('div.addGroup:last input').val(''); 
      } 
     })); 

は私のangularjsスクリプトです：

var app = angular 
     .module('GroupApp', []) 
     .controller('GroupCtrl', function ($scope, AddGroup) { 
      $scope.AddGroup = function() 
      { 
       AddGroup.AddGrouptoDB($scope.group); 
      } 

     }) .factory("AddGroup", ['$http', function ($http){ 
var fac = {}; 
fac.AddGrouptoDB = function(group) 
{ 
    $http.post("/Group/AddGroup", group).success(function (response) { 
     alert(response.status); 
    }) 


} 
return fac; 
}]) 

これはどのようにして達成できますか？私が十分明確でないかどうか知らせてください。何か助けてくれてありがとう！

Answer 1

多分、我々はより多くの角度の方法でこれを行うことができます...

cloneはこれを行うには、私の最初の選択肢ではないでしょう。 ng-clickがあなたのモデルの値を拡張する代わりに、ng-repeatを使用します。この方法で、各入力に個別の属性を割り当てることができます。

それは次のようになります。

HTML：

<div id="divAddRow" class="row" ng-app="GroupApp"> 
    <div class="col-lg-8" ng-controller="GroupCtrl"> 
      <div id="row1" ng-repeat="group in groups" class="input-group input-group-lg addGroup w3-animate-bottom"> 
        <input class="form-control input-lg txtAddGroup" ng-model="group.name" placeholder="Group Name..." /> 
        <span class="input-group-btn"> 
         <button id="btn" type="button" ng-click="AddGroup(group);" 
          class="btn btn-success btn-flat"><i class="fa fa-plus"></i></button> 
        </span> 
      </div> 
    </div> 
</div> 

JS：

var app = angular 
     .module('GroupApp', []) 
     .controller('GroupCtrl', function ($scope, AddGroup) { 
      var id_generator = function(id){ 
       return id + 1 // or query for the last id or generate a guid 
      } 
      $scope.groups = [{'id': 1, 'name': ''}]; 
      $scope.AddGroup = function(group) 
      { 
       AddGroup.AddGrouptoDB(group); 
       var newgroup = {'id':id_generator($scope.groups[$scope.groups.length - 1].id), 
           'name': ''} 
       $scope.groups.push(newgroup); 

      } 

     }) .factory("AddGroup", ['$http', function ($http){ 
var fac = {}; 
fac.AddGrouptoDB = function(group) 
{ 
    $http.post("/Group/AddGroup", group).success(function (response) { 
     alert(response.status); 
    }) 


} 
return fac; 
}]); 

Answer 2

実際に角度を使用するときは、jqueryで学んだことを忘れる必要があります。 jqueryコードに戻ると、角度ダイジェストループの外には何が起こりますか？より単純であれば、角度はjqueryロジックを見ません。 keydownイベントコールバックの最後に$ scope。$ apply（）を試すことができます（私は本当にそれをお勧めしません）。

より良い解決策は、角度イベント指示を使用することです。 このリンクを参照してください：from the angular js docs

Answer 3

あなたのページが読み込まれると、角型アプリケーションがブートストラップされます。そしてこの間、モデルのすべてのウォッチャーを添付し、指示文（あなたの場合はngClick）などを設定します。したがって、ページが完全に読み込まれるまでに、特定のビヘイビアをDOM要素に付加する（ディレクティブ経由で）角度付けが行われます。これは、動的に追加するDOM要素では発生しません。したがって、動的に作成された要素に対する指示は役に立たない。 Angularはこれらの指令を認識していません。したがって、クリックイベントには反応しません。

あなたは

https://docs.angularjs.org/guide/directive

最初の数段落はあなたのために参考になるディレクティブについてのドキュメントを読むことができます。

この問題を解決するために、$ compileがお探しのものです。