使用Vanilla腳本編寫角形JavaScript

每年，我都會有一個大約100行的電子表格，我需要一次一行地將數據提交到一個網站。與其浪費我100次手工填寫表格的時間，我浪費了時間寫一些JavaScript來處理它。使用Vanilla腳本編寫角形JavaScript

該代碼已經爲我服務了3年，但現在他們已經升級到Angular JS應用程序，現在我不確定如何填充表單，就好像它們已被人填充一樣。

就拿https://codepen.io/sevilayha/full/xFcdI/

這個角形式。我想能夠設置元素的值之前，點擊它們以確保髒狀態被觸發，點擊提交，並可以做到，但有角似乎並沒有應用到工作：

function setAndClick(selector, value) { 
    const el = document.querySelector(selector); 
    el.value = value; 
    el.click(); 
} 
setAndClick('[name="name"]', 'Happy Robot'); 
setAndClick('[name="username"]', 'happyrobot'); 
setAndClick('[name="email"]', '[email protected]');

上的字段手動點擊他們已經填補腳本後也觸發一個骯髒的狀態，但我找不到任何情況下（其他城市，KEYUP，KEYDOWN等），可以以編程方式觸發它。

如何使用vanilla JavaScript成功填寫並提交Angular App中的表單？

來源

2017-06-20 fny

angular有一個'$ digest'循環，它與每個表單元素的'ng-model'支持的變量的狀態與輸入的狀態匹配。以編程方式更改輸入不會觸發'$ digest'，因此不會反映外部更改，並且* does *觸發'$ digest'的任何操作都可能會消除這些外部更改。您必須鉤入頁面上的角度應用程序，並使用'$ scope。$ apply（）'手動觸發'$ digest'，但此時，您可能應該直接更改變量值，而不是注入將這些值輸入到輸入中。 – Claies

一個有益的啓示可能是任何元素在DOM可以通過執行獲得它的角範圍：

angular.element(theElement).scope()

然後，您可以使用此範圍內做各種各樣的事情，從角應用itsef外，比如你想在這裏做什麼。這對於嘗試從開發人員工具調試角度應用程序特別有用。

由於這種技術的快速演示，我已經優化了你的筆來設置名稱字段：

https://codepen.io/anon/pen/pwPdqM

該做的工作職能是：

function dirtyByCode() { 
    // Get the input element wrapped up as an angular element 
    var elName = angular.element(document.getElementsByName("name")[0]); 
    // Get the angular scope for this element 
    var $scope = elName.scope(); 
    // Call $setViewValue, which also sets the dirty state. 
    $scope.userForm.name.$setViewValue("Simon"); 
    // Call render to update the form itself. 
    elName.controller("ngModel").$render(); 
}

的優點這樣做是因爲你不需要使用$ apply或擔心$ digest循環。

來源

2017-06-21 00:43:12 sifriday

使用Vanilla腳本編寫角形JavaScript

回答

相關問題