通过使用指令AngularJS浏览器自动填充的解决方法 [英] AngularJS browser autofill workaround by using a directive

问题描述

当提交在AngularJS一种形式，使用浏览器记住密码功能，并在随后的登录尝试，你让浏览器使用用户名和密码登录表格中， $范围模式不会改变的基础上的自动填充。

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?

推荐答案

显然，这是一个已知问题和角当前已打开

我不知道你可以做些什么，除了这里某种变通像你想。看来你在正确的轨道上。我不能让我的浏览器，试图记住你的普拉克密码，所以我不知道这是否会工作，但看看：

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 $原始，并确保你没有覆盖一些贫困用户的输入。此外，在3秒钟可能是太长了。你不应该调用$适用（）在$超时，顺便说一句，应该排队一个$自动消化你。

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.

真正的陷阱：将你的浏览器击败角度来执行？我的浏览器是什么？

这可能是一场打不赢的战争，这就是为什么角（或击倒）一直没有能够很容易地解决这个问题。有在该指令的初始执行时没有数据在输入状态的保证。甚至不在角的初始化的时候....所以这是解决一个棘手的问题。

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屋！