NG-单击不能从动态生成HTML工作 [英] ng-click not working from dynamically generated HTML
问题描述
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的控制器部的功能不从纳克单击事件得到触发。在HTML是越来越成功追加,但NG-点击不工作。告诉我的解决方案,使其工作
Here the function called in the controller part of the AngularJS is not getting trigger from the ng-click event. The Html is getting appended successfully, but the ng-click is not working. Tell me solutions to make it work
推荐答案
若要 NG-点击
来工作,我们需要的编译的这一来源通过使用 $编译
服务。
To make ng-click
to work we need to compile this source by using $compile
service.
请参阅<大骨节病> 小提琴 骨节病>
See Fiddle
创建compilator
Create "compilator":
.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();
有关你的榜样应该是这样的:
For your example should be something like:
<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>
顺便说一句,现在你可以使用相同的指令在你的code和编译任何动态HTML。
BTW, for now you can use the same directive over your code and compile any dynamic HTML.
这篇关于NG-单击不能从动态生成HTML工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!