保存的带Angular控制器的HTML页面按钮点击事件不触发如何解决

你通过原生innerHTML插入包含AngularJS指令（如ng-click）的HTML片段时，这段内容没有经过AngularJS的编译流程，框架无法识别其中的指令定义，也就不会完成对应的事件绑定，所以即使当前页面已经定义了同名处理函数，点击也不会触发。

使用AngularJS官方提供的$compile服务，手动编译插入的动态DOM内容，将其与当前页面的作用域关联即可，具体操作步骤如下：

• 在PageB页面对应的控制器/自定义指令中，注入$compile和$scope依赖
• 完成HTML插入后，执行编译逻辑，示例代码如下：

// 获取承载容器
const mainDom = document.getElementById('main');
// 插入从数据库拉取的HTML内容
mainDom.innerHTML = fetchedHtmlContent;
// 编译容器内新增的DOM，绑定当前作用域
$compile(angular.element(mainDom).contents())($scope);
// 若作用域变更未自动触发，可手动执行digest
if (!$scope.$$phase) {
  $scope.$apply();
}

• 编译时绑定的$scope中，必须包含动态HTML里用到的所有方法（如示例中的blah）和变量，定义规则和原PageA保持一致即可
• 该方案是AngularJS 1.x版本处理动态插入带指令内容的官方推荐方案，不要自行用原生addEventListener绑定事件，否则会破坏Angular的作用域同步逻辑，后续维护成本极高
• 确保存入数据库的HTML来源可信，提前做好XSS注入过滤，避免安全风险

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