AngularJS中JS动态生成元素的ng-click事件不生效如何解决

AngularJS 启动阶段仅会对页面初始加载的静态DOM完成指令编译、作用域绑定。通过原生JS拼接字符串插入的动态DOM不会被AngularJS自动扫描处理，元素上的ng-click仅作为普通HTML属性存在，没有绑定对应事件逻辑，因此点击无法触发绑定函数。

• 优先使用Angular原生模板语法渲染（最推荐，无额外兼容成本）
  放弃原生字符串拼接DOM的写法，把动态按钮逻辑放到页面模板中，通过ng-repeat、ng-if等内置指令控制渲染，AngularJS会自动完成指令绑定：

  <!-- 直接在页面模板中编写，对应data数组会自动遍历渲染 -->
  <td ng-repeat="item in data">
    <button ng-click="callSomething(item.order_number)" class="btn btn-primary">Change</button>
  </td>
  

• 必须动态拼接DOM时，用$compile服务完成编译绑定
  注入$compile服务，将拼接好的HTML字符串和当前作用域完成编译后再插入DOM，示例逻辑：

  // 注意提前在控制器/指令中注入$compile、$scope依赖
  const dynamicBtnHtml = `<td><button ng-click="callSomething(${data[i].order_number})" class="btn btn-primary" >Change</button></td>`;
  // 绑定当前作用域完成DOM编译
  const compiledDom = $compile(dynamicBtnHtml)($scope);
  // 将编译后的DOM节点插入目标位置，禁止直接插入未编译的原始HTML字符串
  document.querySelector('目标父元素选择器').appendChild(compiledDom[0]);
  

• 临时兼容方案（仅适合老项目快速修复，不推荐长期使用）
  直接在拼接的按钮上绑定原生onclick事件，手动触发Angular作用域方法并同步视图：

  button = `<td><button onclick="const scope = angular.element(this).scope(); scope.callSomething(${data[i].order_number}); scope.$apply();" class="btn btn-primary" >Change</button></td>`
  

  该写法会导致模板逻辑和原生DOM逻辑耦合，后期维护成本高，非必要不使用。

内容的提问来源于stack exchange，提问作者Shamako181