为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕哥9229398 2019-09-03 16:26:45
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无法正常工作。告诉我解决方案,让它工作
查看完整描述

3 回答

?
智慧大石

TA贡献1946条经验 获得超3个赞

不是一个完美的修复,仍然! - 只是为了展示如何进行动态编译


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


查看完整回答
反对 回复 2019-09-03
?
MM们

TA贡献1886条经验 获得超2个赞

为了使用ng-click,我们需要使用服务来编译这个源代码$compile。Angular应该知道新生成的HTML,因此应该将此HTML包含在摘要周期中以便触发ng-click和其他事件。


看到 Fiddle


创建“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 );

        }

      });

    }

  };

});

之后,创建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>

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


查看完整回答
反对 回复 2019-09-03
?
holdtom

TA贡献1805条经验 获得超10个赞

您可以在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>' 很好


查看完整回答
反对 回复 2019-09-03
  • 3 回答
  • 0 关注
  • 782 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信