ng-click不能使用dynamic生成的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>' );
有angular的脚本
$scope.create = function() { alert("Hi"); };
这里在AngularJS的控制器部分中调用的函数没有从ng-click事件触发。 Html正在成功追加，但ng-click不起作用。 告诉我解决scheme，使其工作
不是一个完美的修复，仍然！ – 只是为了展示如何dynamic编译
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操作 – 必须在指令的帮助下完成
为了使ng-click工作，我们需要使用$compile服务来编译这个源代码。 Angular应该知道新生成的HTML，因此应该包含这个HTML来消化周期以触发ng-click和其他事件。
看小提琴
创build“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 ); } }); } }; });
之后，创build一个虚拟factory ，模拟你的追加 ：
.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>
顺便说一下，现在你可以在你的代码中使用相同的指令，并编译任何dynamic的HTML。
你可以使用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>'很好
我需要Cordova在新窗口中打开dynamic链接，所以我的解决scheme是在父元素上单击ng，然后查看event.target以查看单击的内容：
<p ng-bind-html="foo.barhtml" ng-click="generalClick($event)"></p>
然后
.controller('FooCtrl', function ($scope) { var html = '<a href="http://www.google.com">google.com</a>'; $scope.foo.barhtml = html.replace(/href/g, 'data-href'); $scope.generalClick = function(event){ // have Cordova open the link in a browser window window.open(event.target.attributes['data-href'].value, '_system'); } })
你需要在这里添加$ compile服务，这将绑定angular度指令，如ng-click到你的控制器作用域。像这样的东西：
var divTemplate = '..your div template'; var temp = $compile(divTemplate)($scope);
然后将其附加到HTML：
angular.element(document.getElementById('foo')).append(temp);
您还可以将事件绑定到div，如下所示：
var div = angular.element("divID"); div.bind('click', $scope.addPhoto());
