在用户脚本中访问Angular元素作用域

Question

让我们假设你正在编写一个浏览器用户脚本(用于Greasemonkey、Tampermonkey等)，并且你正在定制一个用Angular实现的web应用。此外，让我们假设访问它的底层数据比尝试从HTML中抓取数据更好。

你如何访问它的Angular元素的作用域来获取底层属性?

例如:

<ul id="my-list" ng-repeat="row in rows">
<li>{{ row.fullName }}</li>
</ul>

，假设你想要得到row.firstName。

Answer 1

你可以这样获取Angular元素:

const myListEl = document.getElementById('my-list')
const myList = angular.element(myList);

，但myList.scope()是未定义的。你可以调用angular.reloadWithDebugInfo()来修复它，但这也会重新加载页面。相反，可以使用以下命令开始脚本:

// This is actually what angular.reloadWithDebugInfo() does:
window.name = "NG_ENABLE_DEBUG_INFO!" + window.name;

，它将使scope()返回页面生命周期的其余部分的作用域，因此您可以获得例如myList.scope().firstName。