弹窗列表点击时ng-click失效，需点击弹窗项调用API

看起来你遇到的问题是弹窗里的ng-click事件没触发，我帮你分析下可能的原因和对应的解决办法：

原因1：点击区域和事件绑定的元素不匹配 #

你当前的HTML里，ng-click="ClickEventShow()"绑定在一个空的<u>标签上，而显示“lesson”文本的是另一个<u>标签。当你点击“lesson”的时候，实际上点击的是上面那个带ng-bind的<u>，根本没触发绑定了事件的那个空标签。

解决办法：把事件绑定到有内容的元素上，或者调整DOM结构 #

把ng-click直接加到显示文本的<u>上，或者包裹整个可点击区域：

<div id="popover2" class="hide"> 
  <ul ng-repeat="clickPopup in clickPopups" > 
    <a href="javascript:void(0)"> <!-- 加上href防止页面跳转 -->
      <u ng-bind="clickPopup.action" ng-click="ClickEventShow()"></u> 
    </a> 
  </ul> 
</div>

或者用语义更合理的<li>来包裹：

<div id="popover2" class="hide"> 
  <ul> 
    <li ng-repeat="clickPopup in clickPopups" ng-click="ClickEventShow()">
      <span ng-bind="clickPopup.action"></span>
    </li> 
  </ul> 
</div>

原因2：弹窗不在AngularJS的作用域范围内 #

如果这个popover2弹窗是通过第三方插件（比如Bootstrap Popover、jQuery UI Dialog等）动态生成/显示的，可能它的DOM元素并没有被AngularJS的编译器处理，导致ng-click指令不生效。

解决办法：手动编译弹窗DOM，让Angular识别指令 #

在弹窗显示之后，用$compile服务编译它的内容，把它关联到当前作用域：

// 假设你是用jQuery来显示弹窗的，比如：
$('#popover2').removeClass('hide');
// 编译DOM元素
var popupElement = angular.element(document.getElementById('popover2'));
var $compile = popupElement.injector().get('$compile');
var scope = popupElement.scope();
$compile(popupElement)(scope);
scope.$apply();

这样Angular就能识别到弹窗里的ng-click指令了。

原因3：作用域继承问题（如果是嵌套作用域） #

如果ng-repeat创建的子作用域没有正确继承父作用域的ClickEventShow方法，也可能导致事件不触发。你可以试试把方法绑定到$scope的一个对象上，避免原型继承的问题：

解决办法：用对象包裹方法 #

在控制器里：

$scope.vm = {};
$scope.vm.ClickEventShow = function() { 
  alert("0ooo"); 
  console.log('qqqq...........'); 
}; 

然后HTML里改成：

<u ng-bind="clickPopup.action" ng-click="vm.ClickEventShow()"></u>

你可以先试试第一个办法，这是最常见的原因——点击的元素和绑定事件的元素不是同一个，调整后应该就能触发事件了。

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