AngularJS浏览器通过使用指令自动填充的解决方法

Question

在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()返回的值不会更改模型或视图。我该怎么做？

Answer 1

显然，这是Angular的已知问题，目前已打开

除了像您正在尝试的工作以外，我不确定您可以在这里做什么。看来您步入正轨。我无法让我的浏览器记住您的密码，因此不确定是否可以使用，但请看一下：

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。

真正的收获是：您的浏览器会击败Angular来执行吗？那我的浏览器呢？

这可能是一场无法战胜的战争，这就是Angular（或淘汰赛）无法轻松解决它的原因。指令初次执行时，无法保证输入中数据的状态。甚至在Angular初始化时也没有。...因此，这是一个棘手的问题。