我有一个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;当用户点击按钮时。不幸的是,这没有发生,任何人都知道我可能做错了什么?
答案 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所说的选择之外。