如何在AngularJS的ng-repeat中调用父作用域定义的函数？

一、ng-repeat中标签无法触发logout()的问题 #

这确实是AngularJS里常见的作用域陷阱！ng-repeat会为每一个循环项创建独立的子作用域，如果你的logout()函数定义在父控制器的作用域中，直接在子作用域里调用logout()可能因为作用域继承的规则找不到（尤其是子作用域意外覆盖同名属性时）。这里有几个靠谱的解决办法：

1. 优先使用ControllerAs语法（最推荐）

这是AngularJS官方推荐的方式，能彻底避免作用域继承的混乱：

• 控制器里把方法绑定到this：

  app.controller('YourController', function() {
    var vm = this;
    vm.logout = function() {
      // 你的logout逻辑
      console.log('执行退出操作');
    };
  });
  

• 视图中声明控制器别名：

  <div ng-controller="YourController as vm">
    <div ng-repeat="item in vm.items">
      <!-- 用vm直接调用logout，不受子作用域影响 -->
      <a ng-click="vm.logout()">退出</a>
    </div>
  </div>
  

2. 显式调用父作用域的方法

如果暂时不想重构到ControllerAs，可以直接在ng-click里指定$parent：

<a ng-click="$parent.logout()">退出</a>

⚠️ 注意：如果有多层嵌套的作用域（比如ng-repeat里又套了ng-if），$parent可能指向的不是你期望的父作用域，所以这个方法只适合简单场景。

3. 绑定到$rootScope（不推荐，除非全局通用）

如果logout是全局通用的功能，可以把它绑定到$rootScope：

app.run(function($rootScope) {
  $rootScope.logout = function() {
    // logout逻辑
  };
});

然后视图里直接调用：

<a ng-click="logout()">退出</a>

但这种方式会污染全局作用域，尽量少用。

二、书籍图片可点击的问题 #

既然官方链接失效，咱们换个思路，用AngularJS原生的方式实现图片可点击：

方案1：用标签包裹图片

<div ng-repeat="book in vm.books">
  <a ng-click="vm.handleBookClick(book)" style="cursor: pointer;">
    <img ng-src="{{book.imageUrl}}" alt="{{book.title}}" />
  </a>
</div>

vm.handleBookClick = function(book) {
  // 点击图片后的操作，比如跳转到详情页、打开弹窗等
  console.log('点击了书籍：', book.title);
};

<div ng-repeat="book in vm.books">
  <img 
    ng-src="{{book.imageUrl}}" 
    alt="{{book.title}}" 
    ng-click="vm.handleBookClick(book)"
    style="cursor: pointer;"
  />
</div>