ng-click无法使用动态生成的HTML

Question

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无法正常工作。告诉我解决方案，让它工作

Answer 1

不是一个完美的修复，仍然！ - 只是为了展示如何进行动态编译app.controller('AppController', function ($scope, $compile) {&nbsp; &nbsp; var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td contenteditable><input type="text" class="editBox" value=""/></td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<td>' +&nbsp; &nbsp; &nbsp; &nbsp; '<span>' +&nbsp; &nbsp; &nbsp; &nbsp; '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>' +&nbsp; &nbsp; &nbsp; &nbsp; '</span>' +&nbsp; &nbsp; &nbsp; &nbsp; '</td>').appendTo('#newTransaction');&nbsp; &nbsp; $compile($el)($scope);&nbsp; &nbsp; $scope.create = function(){&nbsp; &nbsp; &nbsp; &nbsp; console.log('clicked')&nbsp; &nbsp; }})不要使用控制器进行dom操作 - 它必须在指令的帮助下完成

Answer 2

为了使用ng-click，我们需要使用服务来编译这个源代码$compile。Angular应该知道新生成的HTML，因此应该将此HTML包含在摘要周期中以便触发ng-click和其他事件。看到 Fiddle创建“compilator”：.directive( 'compileData', function ( $compile ) {&nbsp; return {&nbsp; &nbsp; scope: true,&nbsp; &nbsp; link: function ( scope, element, attrs ) {&nbsp; &nbsp; &nbsp; var elmnt;&nbsp; &nbsp; &nbsp; attrs.$observe( 'template', function ( myTemplate ) {&nbsp; &nbsp; &nbsp; &nbsp; if ( angular.isDefined( myTemplate ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // compile the provided template against the current scope&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elmnt = $compile( myTemplate )( scope );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.html(""); // dummy "clear"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.append( elmnt );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; };});之后，创建factory模拟你追加的假人：.factory( 'tempService', function () {&nbsp; return function () {&nbsp;&nbsp; &nbsp; return '<td contenteditable><input type="text" class="editBox" value=""/></td>'+&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td contenteditable><input type="text" class="editBox" value=""/></td>'+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<td>'+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<span>'+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</span>'+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</td>';&nbsp; };});最后称之为：<div compile-data template="{{mainPage}}"></div>&nbsp;在控制器中：$scope.newTransaction= tempService();对于你的例子应该是这样的：<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >&nbsp; &nbsp; <tr compile-data template="{{newTransaction}}">&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-ng-repeat="host in hosts|filter:search:strict" >&nbsp; &nbsp; &nbsp; &nbsp;<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>&nbsp; &nbsp; </tr></table>BTW，现在你可以在你的代码上使用相同的指令并编译任何动态HTML。

Answer 3

您可以在angular.element(this).scope()不使用ng-click的情况下使用并改变'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'至'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>' 很好