AngularJS下渲染SQL Server存储的HTML时ng-click事件不触发问题

问题原因 #

AngularJS 仅会在页面初始加载时自动编译内置指令，你通过ng-bind-html插入的动态HTML内容没有经过Angular的编译流程，其中的ng-click等指令不会被识别绑定到当前作用域，所以点击事件无法触发，这和HTML的存储来源、是否共用控制器无关。

解决方法 #

你需要自定义一个支持编译的指令替代原生ng-bind-html，步骤如下：

1. 新增自定义编译指令，将以下代码加入你的Angular模块中：

// 替换yourAppName为你的Angular应用模块名
angular.module('yourAppName')
.directive('compileHtml', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // 监听绑定的HTML内容变化
      scope.$watch(
        function(scope) {
          return scope.$eval(attrs.compileHtml);
        },
        function(htmlContent) {
          // 插入HTML后编译内容绑定作用域
          element.html(htmlContent);
          $compile(element.contents())(scope);
        }
      );
    }
  };
}]);

2. 修改页面容器的绑定属性，将原来的ng-bind-html替换为自定义的compile-html：

<div id="MainDIV" compile-html="MainDIVHTML"></div>

3. 原有赋值逻辑无需修改，继续保留即可：

$scope.MainDIVHTML= $sce.trustAsHtml(entity.MainDIVHTML);

注意事项 #

• 动态编译HTML存在XSS安全风险，你当前的HTML内容来自内部数据库，风险可控；如果后续开放用户输入HTML的能力，需要做严格的内容过滤。
• 确认$scope.OpenBtn方法已在当前控制器中正确定义，无参数、拼写类错误。

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