DOMへのdata-ng-clickイベントバインディング

Question

私はangularjsを初めて使っています。「ボタン」をクリックすると新しい行が1つ「新しいボタン」で挿入され、 ng-clickイベントも必要です。問題は私がこれをやってみると、新しいボタンが追加された動的な行が追加されますが、新しいボタンはclickイベントが接続されていないことです。いくつかの研究の後、私は"$ compile"のangularjsのサービスの助けを借りてDOMに追加する前に、要素文字列をコンパイルする必要があることを発見しました。しかし、ブラウザがエラーを投げて'$コンパイラは関数ではありません' ...助けてください。ありがとうございました..！！ 次のコードは、 JSPページのコードスニペットです

<td> 
     <button type="button" id="clickButton" data-ng-click="insert()" 
       class="btn btn-sm btn-default"> 
       <i class="fa fa-plus fa-lg"></i> 
     </button> 
    </td> 

angularjsコントローラコード

$scope.insert = function($compile){ 
      var tableRow ="<tr data-ng-repeat='c in ctrl.client.clientOwnerVOList' id='insertionRow"+count+"'>"+ 
       "<td>"+i+"</td>"+ 
       "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerName' name='clientOwnerName{{$index + 1}}' id='Name'></td>"+ 
       "<td class='col-lg-4'><input type='Email' class='form-control' data-ng-model='c.clientOwnerEmail' name='clientOwnerEmail{{$index + 1}}' id='Email'></td>"+ 
       "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerPhone' name='clientOwnerPhone{{$index + 1}}' id='PhoneNo'></td>"+ 
       "<td><button type='button' data-ng-click=insert() class='btn btn-sm btn-default'><i class='fa fa-plus fa-lg'></i></button></td>"+ 
       "<td><button type='button' class='btn btn-sm btn-default' onClick=$(this).closest('tr').remove();><i class='fa fa-trash fa-lg '></i></button></td>"+ 
       "</tr>"; 
       var newTableRow = $compile(tableRow)($scope); 
       $("#insertionRow").append(newTableRow); 
       i++; 
      }; 

Answer 1

あなたはコンパイル使用してディレクティブを作成することができます：あなたのhtmlに続いて

app.directive('dynamic', [ '$compile', 
function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, ele, attrs) { 
      scope.$watch(attrs.dynamic, function (html) { 
       ele.html(html); 
       $compile(ele.contents())(scope); 
      }); 
     } 
    }; 
}]); 

を：

<div dynamic="tableRow"></div> 

...あなたがテーブルの行を表示したい場所に。

Answer 2

なぜあなたは、関数の引数としてコンパイル？あなたは$注入あなたは$スコープを注入と同じようにサービスをコンパイルする必要があります$渡していますつまり、あなたのコントローラー/指令に含まれています。

これは、$ compileを投げていることが原因である可能性がありますが、関数エラーではありません。