jquery 更改angularJS input 内容导致绑定失效的解决办法

在使用greasemonkey过程中，对angularJS框架的WEB 进行自动表单提交动作。

发现JQuery的对inputd的val()赋值操作会使原有的angularJS的绑定验证操作失效。

虽然我在赋值的同时使用的jQuery的change 和trigger方法都没有效果。

查找stackoverflow上看到一个人的情况与我类似，并且下面的解决办法我经过测试也是没有问题的，完美的解决我的问题。

参照歪果仁的一个解决办法：

1. Set the value.
2. Send a change event. For Greasemonkey/Tampermonkey scripts you must be mindful of the sandboxes and jQuery conflicts for this part.
   Using a jQuery .change(), or .trigger(), from a userscript that is not injected, seldom works. Send a proper change event; see below.
3. Since you @required jQuery (good), but used @grant none (bad), your script was causing the page to crash and you would see various errors in the console.
4. The script has a race condition and was often firing before the inputs were ready. Waiting for window.load seems to be enough, but you may have to step up to something like waitForKeyElements() if you should see more timing problems.
5. There may be additional timing issues with the $('#SignupButton').click (); If so, that's outside the scope of this question.
6. DO NOT USE THIS KNOWLEDGE TO VIOLATE ANY WEBSITE'S TERMS OF SERVICE. (If applicable)

With that, the script becomes:

// ==UserScript==
// @name         Roblox Account Create
// @match        https://www.roblox.com/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        GM_addStyle
// ==/UserScript==
var _adj        = [ 'Cool', 'Masked', 'Bloody', 'Lame' ];
var _animals    = [ 'Hamster', 'Moose', 'Lama', 'Duck' ];
var _months     = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
var _username   = _adj[ parseInt( Math.random( ) * _adj.length ) ], _pass = Math.random( ).toString( 36 ).substring( 2, 10 );
_username       += _animals[ parseInt( Math.random( ) * _animals.length ) ];
_username       += parseInt( Math.random( ) * 1000 );
var _dt_month   = _months[ Math.floor( Math.random( ) * ( 12 ) + 0 ) ];
var _dt_day     = Math.floor( Math.random( ) * ( 28 ) + 1 );
var _dt_year    = Math.floor( Math.random( ) * ( 2005 - 1916 + 1 ) + 1916 );

window.addEventListener ("load", function load () {
    setControl ('Username', _username );
    setControl ('Password', _pass );
    setControl ('PasswordConfirm', _pass );
    setControl ('MonthDropdown', _dt_month );
    setControl ('DayDropdown', _dt_day );
    setControl ('YearDropdown', _dt_year );
    $( '#FemaleButton' ).click( );
    $( '#SignupButton' ).click( );
} );

function setControl (elemID, value) {
    var zInput  = $( '#' + elemID );
    zInput.val( value );

    var changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("change", true, true);
    zInput[0].dispatchEvent (changeEvent);
}

Note that we use a valid @grant value, other than none. That's crucial to avoid conflicts with the page's javascript.

参考地址：http://stackoverflow.com/questions/34360739/automate-form-submission-on-an-angularjs-website-using-tampermonkey