问AngularJS浏览器使用指令自动填充解决方法
EN

Stack Overflow用户

提问于 2013-02-19 19:40:24

回答 23查看 79K关注 0票数 111

在AngularJS中提交表单并使用浏览器的“记住密码”功能，并且在随后的登录尝试中让浏览器使用用户名和密码填写登录表单时，$scope模型不会根据自动填充进行更改。

我发现的唯一一个肮脏的方法是使用下面的指令：

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()返回值更改模型或视图。我如何才能做到这一点？

angularjs

javascript

mvvm

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 23

Stack Overflow用户

发布于 2013-02-19 20:25:51

Apparently this is a known issue with Angular and is currently open

我不知道你在这里能做什么，除了一些你正在尝试的工作。看起来你是在正确的轨道上。我无法让我的浏览器尝试记住你的plunk的密码，所以我不确定这是否有效，但请看一下：

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()，BTW，它应该自动为你排队一个$digest。

真正的陷阱:你的浏览器在执行时会胜过Angular吗？我的浏览器呢？

这可能是一场无法取胜的战争，这就是为什么Angular (或Knockout)不能轻易解决它的原因。不能保证在指令初始执行时输入中的数据的状态。甚至在Angular初始化的时候也不会...所以这是一个棘手的问题。

票数 45

Stack Overflow用户

发布于 2013-11-08 08:28:13

您不需要使用$timeout或类似的东西。您可以使用事件系统。

我认为它更英国化，不依赖于jQuery或自定义事件捕获。

例如，在提交处理程序上：

$scope.doLogin = function() {
    $scope.$broadcast("autofill:update");

    // Continue with the login.....
};

然后你可以有一个像这样的autofill指令：

.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    }
});

最后，您的HTML将如下所示：

<input type="text" name="username" ng-model="user.id" autofill="autofill"/>

票数 35

Stack Overflow用户

发布于 2014-01-12 09:22:36

这里有一个解决方案，它比其他解决方案要简单得多，而且在语义上是合理的AngularJS：http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/

myApp.directive('formAutofillFix', function() {
  return function(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').submit(function(e) {
          e.preventDefault();
          elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

然后，您只需将该指令附加到表单：

<form ng-submit="submitLoginForm()" form-autofill-fix>
  <div>
    <input type="email" ng-model="email" ng-required />
    <input type="password" ng-model="password" ng-required />
    <button type="submit">Log In</button>
  </div>
</form>