Angular JS ng-click HTMLが範囲メソッドに到達しないInnerHTMLによって設定されています

Question

私はAngularJS phonegapアプリケーションを持っています。ここで、HTMLはJS Ajaxによって動的に埋められている空白のテーブルです。 Ajaxは必要なデータを取り込み、innerHTMLを使用してテーブルを埋めます。私の場合は、テーブルは複数のボタンで満たされ、各ボタンはNGクリックメソッド名を持っています

$.ajax({ 
    type: 'GET', 
    dataType: 'json', 
    url: 'SAMPLEURL'+tID, 
    contentType: 'application/json;charset=utf-8', 
    success: function(response){ 
     var reqObject = JSON.parse(response); 


     var tableHtml = ""; 
     for(i = 1;i<reqObject.object.length; i++) 
      { 
      var variant = reqObject.variants[i]; 
       tableHtml += "<tr><td>"; 
       tableHtml += "<button type='button' ng-click=\"calculateQuantity();\" class='buttonStandard' id='"+variant.Id+"' style='padding:10px 15px 20px 15px; width:100%;margin-top:-10px;'>"; 


       tableHtml += "<div style='height:40px'><h4>"+variant.Name+"</h4></div>"; 
       tableHtml += "</button>"; 
       tableHtml += "</td></tr><tr><td><br /></td></tr>"; 
      } 

     document.getElementById("tableSelection").innerHTML = tableHtml; 

     $scope.calculateQuantity = function() { 
     alert('test'); 
     }; 

    }, 
    error: function(xhr){ 
     alert('Failed to bring Variants'); 
    }  
}); 

あなたは上記のコードから見ることができるように、私はまたcalculateQuantity呼ばれ、スコープにメソッドを追加していユーザーがボタンをクリックしたときに「テスト」というアラートを送信する必要があります。残念ながら、これは起こっていない、誰かが私が間違っているかもしれないことを知っている？

Answer 1

あなたが再HTML

に挿入する前に、あなたのDOMをコンパイルする$compileを使用する必要があるので、あなたは、動的に作成された要素を使用している場合だけ

document.getElementById("tableSelection").innerHTML = $compile(tableHtml)($scope); 

になるこの行に

document.getElementById("tableSelection").innerHTML = tableHtml; 

を変更

コントローラに$compileを注入することを忘れないでください。

注：方が良いjQueryのライトバージョンを実装しているangular.elementを使用したいのではなくdocument.getElementById

angular.element(document.querySelector('#tableSelection')).append($compile(tableHtml)($scope)) 

更新：ジャスパーSeinhorstとしてはあなたにも、あなたが角度の外に作業している別の問題を抱えていると述べましたゾーンにjQuery ajaxを使用すると、コードを$timeoutにラップする角度ゾーンに戻るか、Ajax呼び出しの応答で$scope.$apply()を呼び出すオプションがあります。 Jasper Seinhorstの選択肢に加えて、