jQuery-ng-click在动态生成的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的控制器部分中调用的函数不会从ng-click事件中触发。 HTML已成功添加,但是ng-click无效。 告诉我解决方案以使其正常工作

Kiran Kumar asked 2020-02-13T15:15:41Z
5个解决方案
47 votes

仍然不是一个完美的解决方案!!! -只是为了说明如何进行动态编译

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操作-必须在指令的帮助下完成

Arun P Johny answered 2020-02-13T15:16:04Z
36 votes

为了使factory正常工作,我们需要使用$compile服务来编译此源。 Angular应该了解新生成的HTML,因此应包含此HTML以摘要循环,以触发ng-click和其他事件。

见小提琴

创建“编译器”:

.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

.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>

顺便说一句,现在您可以对代码使用相同的指令并编译任何动态HTML。

Maxim Shoustin answered 2020-02-13T15:16:55Z
20 votes

您可以使用'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>',而无需使用ng-click

并改变

'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>'

'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>'很好

porya ras answered 2020-02-13T15:17:32Z
3 votes

我需要让Cordova在新窗口中打开动态链接,所以我的解决方案是将ng-click放在父元素上,然后查看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');
    }
})
ricka answered 2020-02-13T15:17:57Z
2 votes

您需要在此处添加$ compile服务,它将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());
AMRESH PANDEY answered 2020-02-13T15:18:25Z
translate from https://stackoverflow.com:/questions/19267979/ng-click-not-working-from-dynamically-generated-html