如何在用户脚本中访问Angular元素的作用域？

针对你用用户脚本定制AngularJS（1.x）应用的场景，直接访问元素作用域拿底层数据比抓取HTML高效得多，具体操作步骤如下：

1. 先明确Angular版本 #

你的例子里用了ng-repeat，属于AngularJS（1.x）范畴，Angular 2+的机制完全不同，这里只讲AngularJS的实现方案。

2. 定位目标DOM元素 #

先通过选择器定位到对应元素，比如例子里的<li>（每个<li>对应ng-repeat循环里的一个row）：

const listItems = document.querySelectorAll('#my-list li');

3. 转成Angular元素并获取作用域 #

AngularJS提供angular.element()方法，把普通DOM元素包装成Angular元素后，调用scope()就能拿到对应的作用域对象：

// 遍历每个列表项，逐个获取row的firstName
listItems.forEach(item => {
  const angularElem = angular.element(item);
  const itemScope = angularElem.scope();
  
  // 直接访问作用域里的row属性
  const firstName = itemScope.row.firstName;
  console.log('用户名：', firstName);
});

关键注意事项 #

• 确保Angular已初始化：用户脚本要等Angular加载完成再执行，在Tampermonkey/Greasemonkey里可以设置@run-at document-idle，或者用Angular的ready事件：

  angular.element(document).ready(() => {
    // 这里写访问作用域的代码
  });
  

• 隔离作用域处理：如果目标元素属于带隔离作用域的指令，要改用isolateScope()方法获取作用域：

  const isolatedScope = angular.element(item).isolateScope();
  

• API兼容性：这种方法依赖AngularJS的内部API，在1.x版本里稳定，但如果应用升级到Angular 2+就会失效，需注意区分版本。

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