加载 AngularJS 库后如何运行用户脚本（/greasemonkey）

Question

我只是想为 Angular 对象创建一些扩展，让 AngularJS 调试更方便。

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

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

你可以找到最终代码sn -p here。

Answer 1

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

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

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);
}