如何通过Puppeteer调用Angular控制器中的$scope.upload函数？

这个问题的核心在于AngularJS的$scope函数并不是全局可用的——你直接调用upload(filePath)时，Puppeteer的page.evaluate上下文里找不到这个函数，因为它只存在于对应控制器的作用域中，而非window对象上。下面是两种可行的解决思路：

方法一：直接获取Angular控制器的作用域调用函数 #

AngularJS提供了通过DOM元素获取对应作用域的方法，你可以先定位到控制器绑定的元素，再获取其$scope来调用目标函数。

具体代码示例 #

假设你的控制器绑定在一个带有ng-controller="UploadController"属性的元素上，Puppeteer代码可以这样写：

// 先等待Angular初始化完成，确保作用域能被获取
await page.waitForFunction(() => {
  return typeof angular !== 'undefined' && angular.element(document.body).scope() !== null;
});

// 调用$scope.upload函数
await page.evaluate((filePath) => {
  // 定位到控制器对应的DOM元素
  const controllerElement = document.querySelector('[ng-controller="UploadController"]');
  // 获取该元素对应的Angular作用域
  const scope = angular.element(controllerElement).scope();
  // 调用作用域上的upload函数
  scope.upload(filePath);
  // 触发Angular脏检查（如果函数涉及视图更新，这一步很必要）
  scope.$apply();
}, filePath);

注意事项 #

• 确保querySelector的选择器能精准定位到你的控制器元素（比如用ID、类名代替属性选择器会更可靠）。
• 如果控制器是嵌套的，要确保获取的是正确层级的作用域。
• 调用完函数后执行scope.$apply()，因为直接在Angular上下文外调用函数不会自动触发脏检查，可能导致视图不更新或逻辑不完整。

方法二：将函数挂载到全局window对象（测试场景推荐） #

如果你只是做测试，不想麻烦定位作用域，可以在Angular控制器里把$scope.upload绑定到window上，让它成为全局函数：

Angular控制器代码修改 #

app.controller('UploadController', function($scope) {
  $scope.upload = function(filePath) {
    // 你的上传逻辑代码
  };

  // 将函数绑定到window，确保作用域正确
  window.upload = $scope.upload.bind($scope);
});

Puppeteer代码调整 #

此时你原来的代码就可以正常工作了（建议还是加上脏检查）：

await page.evaluate((filePath) => {
  upload(filePath);
  // 如果需要触发脏检查，手动调用$apply
  angular.element(document.body).scope().$apply();
}, filePath);

关键前提 #

无论用哪种方法，都要确保页面已经完全加载，AngularJS应用已经初始化完成——上面的waitForFunction就是用来做这件事的，避免在Angular还没准备好时就尝试调用作用域函数。

内容的提问来源于stack exchange，提问作者An Old Guy and His Dog