動的に作成されたボタンに配置するとng-clickプロパティが起動しません

Question

SQLが返すものに基づいてテーブルを動的に構築しています。以下の例では、私がいない問題で、開始時間と終了時間と、ユーザーがテーブルを埋めることができます。

var StartTime = document.createElement('td'); 
var EndTime = document.createElement('td'); 
var InUser = document.createElement('td'); 
StartTime.innerText = value[i].startTime; 
EndTime.innerText = value[i].endTime; 
InUser.innerText = value[i].inUser; 

出力は、私はSQLから受信したエントリ数を持つテーブルになります。私が今したいのは、テーブルの最後の列に追加する別のtd要素を作成することです。これは、特定の行を表示および非表示にするボタンになります。何らかの理由で、ボタンをクリックしたときにng-click機能が動作しません。以下は、td要素を作成する方法と、その要素にボタンを適用する方法です。

var ViewComments = document.createElement('td'); 
ViewComments.innerHTML = '<button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button>';//apply click functionality. 

Ctrlキーを押しながらページの要素を表示するために、テーブルの上に+ Cのクリックシフト、I行がI（すなわちタイプ、NGクリックし、クラス）を指定された正確な値を有していることがわかります。ハイライトされているときに、ボタンの背景が青色に設定されているので、クラスプロパティが機能しています。これは「クリック効果」をもたらします。ボタンが動的に作成されていないアプリケーションでng-clickを使用していたため、なぜng-click機能が動作しないのか分かりません。私はこれを問題と仮定していますか？もしそうなら、ng-click機能を動的に作成するボタンを操作する方法はありますか？私は、彼らが$コンパイルを使用していることを、このstackoverflowの中で見

： ng-click not working from dynamically generated HTML
が、これは、この問題を解決する唯一の方法ですか？

助けていただけたら幸いです！

Answer 1

？これは多くの仕事のように思えますが、角度をもって簡単に行うことができます。

<table ng-if="values"> 
    <tr ng-repeat="value in values"> 
     <td>{{value.startTime}}</td> 
     <td>{{value.endTime}}</td> 
     <td>{{value.inUser}}</td> 
     <td><button type="button" ng-click="showHideComments()" class="r-primary-button">View Comments</button></td> 
    </tr> 
</table> 

あなたのコントローラ内部

$http.get(someUrl).then(function(data){ 
    $scope.values = data; 
}); 


$scope.showHideComments = function() { 
    // do your thing here 
}; 

Answer 2

ありがとうございます。compileとなります。ドキュメントとして

は

は、テンプレートにHTML文字列またはDOMをコンパイルしてから一緒にスコープとテンプレートをリンクするために使用できるテンプレート機能を、生成することを言います。

動的文字列を取得してコンパイルする再使用可能なディレクティブを作成できます。あなたは、角度のユーティリティを使用していないのはなぜ

例

<div ng-controller="Controller"> 
    <element-create message='htmlString'></element-create> 
</div> 

指令

angular.module("CompileDirective", []) 
    .directive('elementCreate', ['$compile', function ($compile) { 
     return { 
     restrict: 'E', 
     scope: { 
      message: "=" 
     }, 
     replace: true, 
     link: function(scope, element, attrs) { 
      var template = $compile(scope.message)(scope); 
      element.replaceWith(template);    
     }, 
     controller: ['$scope', function($scope) { 
      ... 
     }] 
     } 
    }])