首頁(yè) 猿問 AngularJS瀏覽器通過使用指...

AngularJS瀏覽器通過使用指令自動(dòng)填充的解決方法

JavaScript MVVM AngularJS

ibeautiful 2019-11-11 13:04:06

在AngularJS中提交表單并使用瀏覽器時(shí)，請(qǐng)記住密碼功能，并且在隨后的登錄嘗試中，讓瀏覽器使用用戶名和密碼填寫登錄表單，該$scope模型不會(huì)基于自動(dòng)填充進(jìn)行更改。我發(fā)現(xiàn)的唯一骯臟的技巧是使用以下指令：app.directive("xsInputSync", ["$timeout" , function($timeout) { return { restrict : "A", require: "?ngModel", link : function(scope, element, attrs, ngModel) { $timeout(function() { if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) { scope.apply(function() { ngModel.$setViewValue(element.val()); }); } console.log(scope); console.log(ngModel.$name); console.log(scope[ngModel.$name]); }, 3000); } };}]);問題在于，ngModel.$setViewValue(element.val());基于element.val()返回的值不會(huì)更改模型或視圖。我該怎么做？

查看完整描述

3 回答

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

顯然，這是Angular的已知問題，目前已打開

除了像您正在嘗試的工作以外，我不確定您可以在這里做什么?？磥砟饺胝?。我無法讓我的瀏覽器記住您的密碼，因此不確定是否可以使用，但請(qǐng)看一下：

app.directive('autoFillSync', function($timeout) {

return {

require: 'ngModel',

link: function(scope, elem, attrs, ngModel) {

var origVal = elem.val();

$timeout(function () {

var newVal = elem.val();

if(ngModel.$pristine && origVal !== newVal) {

ngModel.$setViewValue(newVal);

}

}, 500);

}

});

<label for="username">Username</label>

<label for="password">Password</label>

<button type="submit">Login</button>

</form>

我認(rèn)為您只需要稍微簡(jiǎn)化一下方法即可。我絕對(duì)推薦的一件事是檢查ngModel.$pristine并確保您不會(huì)覆蓋某些不良用戶的輸入。另外，3秒可能太長(zhǎng)。您不必在$ timeout中調(diào)用$ apply（），順便說一句，它應(yīng)該為您自動(dòng)排隊(duì)$ digest。

真正的收獲是：您的瀏覽器會(huì)擊敗Angular來執(zhí)行嗎？那我的瀏覽器呢？

這可能是一場(chǎng)無法戰(zhàn)勝的戰(zhàn)爭(zhēng)，這就是Angular（或淘汰賽）無法輕松解決它的原因。指令初次執(zhí)行時(shí)，無法保證輸入中數(shù)據(jù)的狀態(tài)。甚至在Angular初始化時(shí)也沒有。...因此，這是一個(gè)棘手的問題。

反對(duì) 回復(fù) 2019-11-11