javascript - 在 Greasemonkey 中修改 Angular JS 中的 DOM 元素

Question

我正在开发一个小的 Greasemonkey 脚本来加速 vendor 工具中的一些进程，该工具是用 angularJS 编写的。

我似乎面临的问题是脚本运行时该元素不在 DOM 中:

$(document).ready(function() {
  var pwEl = $("input:password").val(chance.word({length: 8});
};

失败是因为在 (document).ready() 运行时输入字段似乎不存在。有一些资源似乎证实了这一点。

有没有一种方法可以让我在运行脚本之前等待 Angular 完成？我找到了使用的引用资料:

angular.element(document).ready(function() {
  console.log("Hi from angular element ready");
});

然而，这似乎从来没有执行过。

我真的是 Angular 的新手(我只玩过一些简短的教程)。任何方向表示赞赏。

谢谢!

Answer 1

等待使用计时器、MutationObserver 或类似 waitForKeyElements() 的实用程序实际添加元素.

这是一个完整的 Greasemonkey 脚本，显示了一种方式:

// ==UserScript==
// @name     _Process nodes after Angular adds them
// @match    http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/BrockA/2625891/raw/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements ("input:password", actOnNode);

function actOnNode (jQueryNode) {
    //--- Do whatever you need to on individual nodes here:
    // For example:
    jQueryNode.css ("background", "orange");
}