Angular模板生成后JavaScript无法在动态视图运行的问题

这个问题我之前也碰到过，本质是Angular的模板渲染机制和原生JS事件绑定的时机冲突了，我给你拆解下原因和解决办法：

你遇到的核心问题是：动态生成的DOM元素（比如通过ng-if/ng-show控制的div2）在页面初始加载时并不存在。如果你的alert逻辑是用原生JS（比如document.getElementById('div2').addEventListener('click', ...)）绑定的，那这段代码在页面初始化时执行，根本找不到div2这个元素，自然没法绑定事件。而div1是初始就存在的，所以它的点击事件能正常生效。

Angular是数据驱动的框架，最好用它的原生指令来处理事件绑定，这样框架会自动帮你处理动态元素的事件绑定。具体步骤如下：

1. 在控制器里定义处理点击事件的函数

angular.module('yourAppName', [])
.controller('yourController', function($scope) {
  // 初始状态：不显示div2
  $scope.showDiv2 = false;

  // 点击div1的处理逻辑：显示div2 + 弹出alert
  $scope.handleDiv1Click = function() {
    $scope.showDiv2 = true;
    alert("aaa");
  };

  // 点击div2的处理逻辑
  $scope.handleDiv2Click = function() {
    alert("aaa");
  };
});

2. 修改模板，用ng-click指令绑定事件

<!-- 记得包裹ng-app和ng-controller -->
<div ng-app="yourAppName" ng-controller="yourController">
  <div id="div1">
    <div class="alertonclick" ng-click="handleDiv1Click()" style="background-color: red; padding: 20px;">
      点击我显示div2
    </div>
  </div>
  <!-- 用ng-if控制div2的显示，Angular会在showDiv2为true时自动渲染并绑定事件 -->
  <div id="div2" ng-if="showDiv2">
    <div class="alertonclick" ng-click="handleDiv2Click()" style="background-color: green; padding: 20px; margin-top: 10px;">
      点击我触发alert
    </div>
  </div>
</div>

这种方式的好处是完全贴合Angular的生命周期，不管div2什么时候被渲染出来，ng-click都会自动生效，不需要手动处理DOM绑定。

如果因为某些原因必须用原生JS处理，那可以用事件委托的方式：把事件绑定到一个始终存在的父元素（比如div1或者body），通过事件冒泡来捕获动态元素的点击事件。

示例代码：

// 假设页面加载完成后执行这段代码
document.addEventListener('DOMContentLoaded', function() {
  // 绑定到div1（初始就存在的父元素）
  document.getElementById('div1').addEventListener('click', function(e) {
    // 判断点击的目标是不是div2里的元素
    if (e.target.closest('#div2 .alertonclick')) {
      alert("aaa");
    }
  });
});

原理是父元素会捕获所有子元素的点击事件，哪怕子元素是后来动态生成的，只要点击的目标符合判断条件，就会执行对应的逻辑。不过这种方式绕开了Angular的机制，容易出现和框架生命周期冲突的问题，所以尽量少用。

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