ng-repeat内ng-click事件不触发，学校图表切换按钮失效

这问题我之前踩过坑！核心原因就是ng-repeat会为每个迭代项创建独立的子作用域，而你直接在子作用域里调用父作用域的函数时，容易因为AngularJS的原型继承机制导致函数无法正确绑定到父作用域的方法上。

问题分析 #

你写的单独按钮能正常触发，是因为它直接在父作用域下；但ng-repeat生成的每个按钮都属于自己的子作用域，当你写ng-click="showlinegraph(testData)"时，子作用域会试图找自己的showlinegraph函数，找不到的话才会向上找父作用域——但如果不小心在子作用域里创建了同名的属性（哪怕是无意的），就会阻断原型继承，导致触发失败。

解决方案（按推荐程度排序） #

1. 使用视图模型对象（最推荐，避免作用域混乱）

在控制器里把函数绑定到一个对象上，这样子作用域会通过原型继承找到父作用域的对象，不会创建自己的同名属性：

// 控制器代码修改
$scope.vm = {}; // 创建一个统一的视图模型对象
$scope.vm.showlinegraph = function(data) {
  $scope.showgraph = !$scope.showgraph;
  console.log(data);
};

然后修改按钮的ng-click：

<button ng-repeat="datarow in testData | unique:'school_name'" 
        ng-click="vm.showlinegraph(testData)">
  {{datarow.school_name}}
</button>

2. 直接通过$parent访问父作用域（简单但耦合性高）

如果不想改控制器，可以直接在ng-click里指定调用父作用域的函数：

<button ng-repeat="datarow in testData | unique:'school_name'" 
        ng-click="$parent.showlinegraph(testData)">
  {{datarow.school_name}}
</button>

不过这种写法会让代码依赖作用域层级，后续维护起来容易出问题，不推荐长期使用。

3. 检查unique过滤器的有效性

另外要确认你用的unique过滤器是正确引入的——如果是自定义过滤器，要确保它能正确返回去重后的数组；如果是第三方的（比如angular-filter库），要确保库已经加载，否则ng-repeat可能因为数据异常导致渲染失败，间接影响点击事件。

调试小技巧 #

• 在按钮里加个插值表达式，比如{{vm.showlinegraph}}（用方案1的话），如果能显示函数体，说明作用域绑定正常；如果显示undefined，说明作用域有问题。
• 用AngularJS的Batarang插件查看页面的作用域层级，确认子作用域是否正确继承了父作用域的函数。

另外提个小建议：如果你想展示对应学校的图表，是不是应该把当前学校的数据传进去？比如vm.showlinegraph(datarow)而不是整个testData？这样能更精准地渲染对应学校的图表~

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