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

但是,这似乎永远不会执行.

我真的很新角(我只用几个简短教程发挥各地).任何方向表示赞赏.

谢谢!

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