自定义modal中ng-click不生效 绑定函数无法触发如何解决

• 核心原因是动态插入的带AngularJS指令的HTML模板未经过$compile服务编译：你在body参数中拼接的字符串模板是以纯文本形式插入DOM的，AngularJS不会自动识别其中的ng-click等内置指令，无法完成指令解析和事件绑定，因此点击按钮不会触发对应函数。
• 次要可能原因是作用域不匹配：如果你的自定义modal渲染时默认生成了独立作用域，且未和定义test函数的当前$scope做绑定，也会导致作用域链上找不到test函数，触发失败。

方案1：修改自定义modal服务，新增编译绑定逻辑（最推荐） #

在commonService中注入AngularJS内置的$compile服务，插入模板前先完成模板编译和作用域绑定：

// 调整commonService的modalDialog实现
app.service('commonService', ['$compile', function($compile) {
  this.modalDialog = function(options, bindScope) { 
    // 新增bindScope参数，用于接收外部传入的作用域
    // 原有modal初始化逻辑保持不变
    const modalBodyContainer = document.querySelector('.your-modal-body-selector'); // 替换为你的modal内容容器选择器
    // 编译模板并绑定作用域后再插入DOM
    const compiledTemplate = $compile(options.body)(bindScope);
    modalBodyContainer.appendChild(compiledTemplate);
    // 剩余modal渲染、展示逻辑保持不变
  }
}])

调用服务时传入当前定义了test函数的$scope即可：

commonService.modalDialog({
  state: 'default',
  header: 'my header message',
  body: '<div class="form-group">' +
      '<div>Article Name</div>' +
      '<button class="btn btn-success" ng-click="test()">test</button>'
}, $scope); // 传入当前作用域

方案2：临时调试方案（不推荐长期使用） #

如果暂时不想改动公共服务代码，可以将需要触发的函数临时挂载到$rootScope上：

// 注入$rootScope后挂载test函数
$rootScope.test = function(){
  console.log("ng-click fired");
};

该方案会污染全局作用域，仅适合临时排查问题使用，生产环境不建议使用。

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