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- click无效。告诉我解决方案以使其正常工作
仍然不是一个完美的解决方案!!!-只是为了说明如何进行动态编译
app.controller('AppController', function ($scope, $compile) { var $el = $('<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>').appendTo('#newTransaction'); $compile($el)($scope); $scope.create = function(){ console.log('clicked') } })
不要将控制器用于dom操作-必须在指令的帮助下完成