AngularJS 浏览器使用指令自动填充解决方法 [英] AngularJS browser autofill workaround by using a directive
问题描述
当在 AngularJS 中提交表单并使用浏览器记住密码功能时，在随后的登录尝试中，您让浏览器使用用户名和密码填写登录表单，$scope 模型获胜'不会根据自动填充进行更改.
When submitting a form in AngularJS and use the browser remember password functionality, and in a subsequent login attempt you let the browser fill in the login form with the username and password, the $scope model won't be changed based on the autofill.
我发现的唯一肮脏的黑客是使用以下指令:
The only dirty hack I found is to use the following directive:
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() 返回值.我怎样才能做到这一点?
The problem is that the ngModel.$setViewValue(element.val()); doesn't change the model nor the view based on the element.val() returned value. How can I accomplish that?
推荐答案
我不确定除了您正在尝试的某种解决方法之外，您还可以在这里做什么.看来你是在正确的轨道上.我无法让我的浏览器尝试记住您 plunk 的密码，所以我不确定这是否可行，但请查看:
I'm not sure what you could do here besides some sort of work around like you're trying. It seems you're on the right track. I couldn't get my browser to try to remember a password for your plunk, so I'm not sure if this will work but have a look:
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);
}
}
});
<form name="myForm" ng-submit="login()">
<label for="username">Username</label>
<input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
<label for="password">Password</label>
<input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
<button type="submit">Login</button>
</form>
我认为您只需要稍微简化一下您的方法即可.我绝对推荐的一件事是检查 ngModel.$pristine 并确保您没有覆盖一些糟糕的用户输入.另外，3 秒可能太长了.您不必在 $timeout 中调用 $apply()，顺便说一句，它应该自动为您排队 $digest.
I think you just need to simplify your approach a bit. The one thing I definitely recommend is to check ngModel.$pristine and make sure you're not overwriting some poor user's input. Also, 3 seconds is probably too long. You shouldn't have to call $apply() in a $timeout, BTW, it should queue a $digest for you automatically.
真正的问题:您的浏览器会在执行方面击败 Angular 吗?我的浏览器呢?
这可能是一场无法取胜的战争，这就是 Angular(或 Knockout)无法轻易解决的原因.无法保证指令初始执行时输入中数据的状态.甚至在 Angular 初始化的时候都没有......所以这是一个棘手的问题.
This is probably an unwinnable war, which is why Angular (or Knockout) hasn't been able to solve it readily. There's no guarantee of the state of the data in your input at the time of the directive's initial execution. Not even at the time of Angular's initialization.... So it's a tricky problem to solve.
这篇关于AngularJS 浏览器使用指令自动填充解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
