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

时间:2017-11-07 13:50:22

标签: javascript angularjs ajax cordova phonegap

我有一个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,它应该发送一个警告&#39; test&#39;当用户点击按钮时。不幸的是,这没有发生,任何人都知道我可能做错了什么?

1 个答案:

答案 0 :(得分:1)

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

只需更改此行

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

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

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

注意:您最好使用实现jQuery light版本的angular.element而不是document.getElementById

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

更新,因为Jasper Seinhorst说你还有另一个问题就是你使用jQuery ajax在角度区域之外工作,你有一些选择可以回到包含你的角度区域代码转换为$timeout或在Ajax调用的响应中调用$scope.$apply()。除了Jasper Seinhorst所说的选择之外。