AngularJS[$rootScope:infdig]错误：视图调用函数引发无限循环

一、为什么控制器函数会导致无限循环（$rootScope:infdig）？ #

AngularJS的脏检查机制（digest循环）会多次执行绑定在视图中的表达式（比如{{ getItemName(itemCart) }}），直到连续两次执行的结果完全一致，或者达到最大循环次数（默认10次）。你的原函数存在两个关键问题：

1. 函数没有返回稳定的值：
   你的getItemName函数里调用了异步的sgcdata.get，但外层函数没有返回任何值（then回调里的return只是回调函数的返回，不会影响外层函数的返回值），所以每次执行这个函数都会返回undefined。

2. 异步请求触发新的digest循环：
   sgcdata.get内部用了$http，而$http请求完成后会自动触发Angular的digest循环。这就形成了恶性循环：

   • digest循环执行getItemName，发起XHR请求
   • 请求完成，触发新的digest循环
   • 新的digest循环再次执行getItemName，又发起请求
   • 重复上述步骤，直到触发$rootScope:infdig错误

而当你返回普通字符串时，每次函数执行的结果都是固定的，Angular的脏检查会发现结果稳定，不会继续循环，所以一切正常。

二、为什么过滤器方案无法显示值？ #

AngularJS的过滤器是同步执行的，它需要立即返回一个值来渲染视图。你的过滤器里发起了异步请求，在then回调里的return无法作为过滤器的返回值——过滤器已经执行完毕并返回了undefined，异步请求的结果无法回溯到视图中。这就是为什么视图无法获取到正确值的原因。

三、正确的解决方案 #

方案1：批量预加载+缓存（推荐） #

最有效的方式是在购物车数据加载完成后，批量请求所有需要的商品信息，缓存到$scope的对象中，视图直接读取缓存值，避免重复请求和脏检查循环。

控制器代码：

$scope.itemNames = {}; // 用于缓存商品名称，键是商品ID，值是品牌+型号

// 加载购物车中所有商品的名称
function loadCartItemNames() {
  // 提取购物车中的所有商品ID
  const itemIds = $scope.connectedUser.cart.map(cartItem => cartItem);
  if (itemIds.length === 0) return;

  // 批量请求商品数据（假设你的后端支持通过$in查询多个ID）
  sgcdata.get('item', { _id: { $in: itemIds } }).then(dataItems => {
    // 将结果缓存到itemNames中
    dataItems.forEach(item => {
      $scope.itemNames[item._id] = `${item.brand_name} ${item.reference}`;
    });
  }).catch(err => {
    console.error('加载商品名称失败:', err);
  });
}

// 监听购物车数据变化，自动重新加载商品名称
$scope.$watch('connectedUser.cart', loadCartItemNames, true);

视图代码：

<li ng-repeat="itemCart in connectedUser.cart track by $index" class="list-group-item">
  <span class="badge cursorpointer" ng-click="removeFromCart(itemCart)">X</span>
  <a href="#">{{ itemNames[itemCart] || '加载中...' }}</a>
</li>

方案2：单个请求+缓存（适合无法批量请求的场景） #

如果后端不支持批量查询，可以单个请求商品信息，但要加入缓存逻辑，避免重复请求和脏检查循环。

控制器代码：

$scope.itemNames = {};

$scope.getItemName = function(itemId) {
  // 如果已缓存，直接返回缓存值
  if ($scope.itemNames[itemId]) {
    return $scope.itemNames[itemId];
  }

  // 未缓存则发起请求，请求完成后更新缓存
  sgcdata.get('item', { _id: itemId }).then(dataItem => {
    $scope.itemNames[itemId] = `${dataItem[0].brand_name} ${dataItem[0].reference}`;
  }).catch(err => {
    console.error('加载商品名称失败:', err);
    $scope.itemNames[itemId] = '加载失败';
  });

  // 返回临时占位符，直到请求完成
  return '加载中...';
};

视图代码：

<li ng-repeat="itemCart in connectedUser.cart track by $index" class="list-group-item">
  <span class="badge cursorpointer" ng-click="removeFromCart(itemCart)">X</span>
  <a href="#">{{ getItemName(itemCart) }}</a>
</li>

额外优化：简化sgcdata.get代码 #

你的sgcdata.get手动创建了$q.defer，但其实$http本身就返回Promise，可以简化代码：

service.get = function(collection, filters) {
  const formatRequest = function(obj) {
    const str = [];
    for (const p in obj) {
      str.push(`${encodeURIComponent(p)}=${encodeURIComponent(obj[p])}`);
    }
    return str.length ? `&${str.join('&')}` : '';
  };

  return $http({
    method: 'GET',
    url: `/v1/get/?element=${collection.toLowerCase()}${formatRequest(filters)}`
  }).then(response => {
    return response.data;
  }).catch(response => {
    console.error("[ FAILED ] >> " + response);
    return $q.reject(response); // 抛出错误，方便调用者处理
  });
};

内容的提问来源于stack exchange，提问作者François Rousselet