动态加载指令时如何绑定事件(angularjs1)

iteye_17604

于 2016-06-22 16:37:27 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17604/article/details/82653666

angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决Angular中动态生成的HTML不触发事件绑定的问题。通过使用$compile服务重新编译动态生成的内容，确保了ng-click等指令能够正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，如果动态组的HTML里面有ng-click等事件时，会发现显示出来的内容根本不执行ng-click绑定的方法！

这个是因为异步返回之后，指令的编译已经完成，因此需要动态编译。

使用$compile服务！在link方法中对返回后的html代码经过$compile服务处理后再插入：
var el=$compile("HTML代码")(scope); element.append(el);

var TestCtrl = function($scope, $element,$compile){
    $scope.a = '123';
    $scope.set = function(){
      var tpl = $compile('<p>hello {{ a }}</p>');
      var e = tpl($scope);
      $element.append(e);
    }
  }