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单击不工作。告诉我解决方案，使其工作

解决方法

要使ng点击工作，我们需要使用$ compile服务来编译这个源代码。

见Fiddle

创建“编译器”：

.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();

对于你的例子应该是这样：

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

BTW，现在你可以对你的代码使用相同的指令，并编译任何动态HTML。

jquery – ng-click无法从动态生成的HTML工作

解决方法

猜你在找的jQuery相关文章