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 

   @require

   d 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