HTML
<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
<tr id="newTransaction">
</tr>
<tr data-ng-repeat="host in hosts|filter:search:strict" >
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
</tr>
</table>
Jquery
$('#newTransaction').append(
'<td contenteditable><input type="text" class="editBox" value=""/></td>'+
'<td contenteditable><input type="text" class="editBox" value=""/></td>'+
'<td>'+
'<span>'+
'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
'</span>'+
'</td>'
);
角度脚本
$scope.create = function() {
alert("Hi");
};
这里在AngularJS的控制器部分调用的函数不会从ng-click事件触发。 Html正在成功附加，但ng单击不工作。告诉我解决方案，使其工作
解决方法
要使ng点击工作，我们需要使用$ compile服务来编译这个源代码。
创建“编译器”：
.directive( 'compileData',function ( $compile ) {
return {
scope: true,link: function ( scope,element,attrs ) {
var elmnt;
attrs.$observe( 'template',function ( myTemplate ) {
if ( angular.isDefined( myTemplate ) ) {
// compile the provided template against the current scope
elmnt = $compile( myTemplate )( scope );
element.html(""); // dummy "clear"
element.append( elmnt );
}
});
}
};
});
之后，创建虚拟工厂，模拟您的追加：
.factory( 'tempService',function () {
return function () {
return '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
'<td contenteditable><input type="text" class="editBox" value=""/></td>'+
'<td>'+
'<span>'+
'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
'</span>'+
'</td>';
};
});
最后调用它：
<div compile-data template="{{mainPage}}"></div>
在控制器：
$scope.newTransaction= tempService();
对于你的例子应该是这样：
<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
<tr compile-data template="{{newTransaction}}">
</tr>
<tr data-ng-repeat="host in hosts|filter:search:strict" >
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
</tr>
</table>
BTW，现在你可以对你的代码使用相同的指令，并编译任何动态HTML。
