Angular JS ng-click HTML 由 InnerHTML 未达到范围方法设置

Question

我有一个 AngularJS phonegap 应用程序，其中 HTML 只是一个空白 table，由 JS Ajax 动态填充。 Ajax 带来所需的数据并使用 innerHTML 填充 table。在我的例子中，table 充满了多个按钮，每个按钮都有一个 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 注入您的控制器

注意：你最好使用 angular.element 工具 jQuery 精简版而不是 document.getElementById

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

更新： 正如 Jasper Seinhorst 所说，您还有另一个问题，即您在 angular 区域之外使用 jQuery ajax，您有一些选项可以返回 angular 区域，该区域将您的代码包装到 $timeout 中，或者在 Ajax 调用的响应中调用 $scope.$apply()。除了 Jasper Seinhorst 所说的选项。

Angular JS ng-click HTML 由 InnerHTML 未达到范围方法设置

Angular JS ng-click HTML being set by InnerHTML not reaching scope method

javascript

ajax

angularjs

cordova

phonegap