如何在 AngularJS 库加载后 运行 userscript(/greasemonkey)

Question

我只是想为 angular 对象创建一些扩展以使 AngularJS 调试更方便。

但是当我 运行 添加用户脚本时，它找不到 angular 对象。 AngularJS 库加载在标签底部。

UPD：@estus 提供了正确的答案，但是如果你想使用 chrome 你需要通过 Tampermonkey 扩展安装它。

您可以找到最终代码片段 here。

Answer 1

用户脚本运行时 Angular 不可用的事实表明 Angular 是异步加载的，这对于任何 SPA 都是正常的（还要检查 @run-at 是不要 设置为document-start，这不是这里的理想行为）。

用户脚本通常的解决方法是观察所需的变量：

var initWatcher = setInterval(function () {
    console.log('watch');
    if (unsafeWindow.angular) {
        clearInterval(initWatcher);
        init();
    }
}, 100);

function init() {
    console.log('angular', unsafeWindow.angular);
}

如果不需要跨浏览器兼容性，则可以使用特定于 FF 的 Object.prototype.watch：

unsafeWindow.watch('angular', function (prop, oldVal, newVal) {
    console.log('watch');
    if (newVal) {
        unsafeWindow.unwatch('angular');
        // angular is still undefined ATM, run init() a bit later
        setTimeout(init);
    }
    return newVal;
});

function init() {
    console.log('angular', unsafeWindow.angular);
}