在Greasemonkey中修改Angular个JS中的DOM个元素

Question

我正在开发一个小的 Greasemonkey 脚本来加速供应商工具中的一些进程，该工具是用 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");
}

在Greasemonkey中修改Angular个JS中的DOM个元素

Modify DOM elements in Angular JS in Greasemonkey

javascript

jquery

angularjs

greasemonkey