AngularJS：Bootstrap模态框内ng-click事件无法触发的问题求助

嗨，我帮你排查了下问题，核心原因其实很清晰——你要调用的selectDataEntry函数根本没定义在模态框的控制器里，还有个小的大小写错误，一起来修正：

1. 把selectDataEntry移到模态框控制器内 #

你的模态框控制器modalCtrl目前只有close()方法，但你在模板里绑定的selectDataEntry是定义在其他地方（应该是主控制器？），而Bootstrap模态框有自己独立的作用域，主控制器的函数在模态框作用域里是访问不到的。

修正后的模态框控制器代码：

export class modalCtrl { 
  static $inject = ["$uibModalInstance", "dataList"]; 
  constructor(
    private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance, 
    public dataList: Array<Interfaces.dataList>
  ) { } 

  close(): void { 
    this.$uibModalInstance.close(); 
  }

  // 将selectDataEntry函数添加到模态框控制器中
  selectDataEntry(item: Interfaces.dataList) { 
    this.dataList.forEach(p => p.isSelected = false); 
    item.isSelected = true; 
    console.log('ngclick works'); 
  }
} 
// 注意这里的类名要和定义的一致（你原来写的ModalCtrl是大写开头，和类名modalCtrl不匹配）
module.controller("modalCtrl", modalCtrl); 

2. 确保模板中的ng-click使用controllerAs别名 #

因为你在打开模态框时设置了controllerAs: "vm"，所以模板里的函数绑定必须加上vm.前缀，这样AngularJS才能找到模态框控制器里的函数：

<!-- 模态框模板示例 -->
<div class="modal-body">
  <ul>
    <li ng-repeat="item in vm.dataList" ng-click="vm.selectDataEntry(item)">
      {{item.name}}
    </li>
  </ul>
</div>
<div class="modal-footer">
  <button class="btn btn-default" ng-click="vm.close()">关闭</button>
</div>

3. 额外检查点 #

• 确认resolve传入的dataList确实是可修改的（你已经解决了ng-repeat的问题，这步应该没问题）
• 打开浏览器控制台，看看有没有控制器找不到的报错（比如之前的大小写错误会导致ModalCtrl is not defined的错误）

这样调整后，模态框内的ng-click应该就能正常触发selectDataEntry函数了！

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