由InnerHTML设置的Angular JS ng-clickHTML未达到范围方法

Question

我有一个AngularJS的phonegap应用程序，其中HTML只是一个由JS Ajax动态填充的空白表。Ajax 使用 innerHTML 引入所需的数据并填充表。就我而言，表格中充满了多个按钮，每个按钮都有一个 ng-click 方法名称：

$.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 的方法，当用户单击按钮时，它应该发送带有"test"的警报。不幸的是，这没有发生，有人知道我可能做错了什么？

Answer 1

如果您正在使用动态创建的元素，那么在插入HTML之前需要使用$compile重新编译DOM

。

只需更改此行

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

要成为

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

不要忘记将$compile注入控制器

注意：你最好使用实现jQuery轻量级版本的angular.element而不是document.getElementById

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

更新：正如Jasper Seinhorst所说，您还有另一个问题，即您使用jQuery ajax在角度区域之外工作，您有一些选择可以返回将代码包装到$timeout中的角度区域，或者在Ajax调用的响应中调用$scope.$apply()。 除了贾斯珀·塞恩霍斯特所说的选项。