显然，这是 Angular 的一个已知问题，目前已开放

除了像您正在尝试的某种工作之外，我不确定您在这里还能做什么。看来你是在正确的轨道上。我无法让我的浏览器尝试记住您 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() ，顺便说一句，它应该自动为你排队 $digest 。

真正的问题：你的浏览器会在执行上击败 Angular 吗？我的浏览器呢？

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

这是一个解决方案，它远没有其他解决方案那么笨拙，并且在语义上是 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>

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

我认为它更 Angularish 并且不依赖于 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"/>

不需要再破解了！Angular dev tbosch做了一个polyfill，当浏览器更改表单字段时触发更改事件而不触发更改事件：

https://github.com/tbosch/autofill-event

目前他们不会将其构建到 Angular 代码中，因为这是浏览器的错误修复，并且在没有 Angular 的情况下也能工作（例如，对于普通的 jQuery 应用程序）。

“polyfill 将检查文档加载时的更改以及保留输入时的更改（仅在同一表单中）。但是，如果您愿意，您可以手动触发检查。

该项目有单元测试和半自动测试，所以我们终于有一个地方可以收集所有不同的用例以及所需的浏览器设置。

请注意：这个 polyfill 适用于普通的 AngularJS 应用程序、AngularJS/jQuery 应用程序以及不使用 Angular 的普通 jQuery 应用程序。”

它可以通过以下方式安装：

bower install autofill-event --save

在页面中的 jQuery 或 Angularautofill-event.js 之后添加脚本。

这将执行以下操作：

• DOMContentLoaded 之后：检查所有输入字段
• 剩下一个字段：检查同一表单中的所有其他字段

API（手动触发检查）：

• $el.checkAndTriggerAutoFillEvent(): 对给定的 jQuery / jQLite 元素中的所有 DOM 元素执行检查。

怎么运行的

1. 记住用户（侦听更改事件）和 JavaScript（通过拦截 $el.val() 以获取 jQuery / jQLite 元素）对输入元素的所有更改。更改后的值存储在私有属性中的元素上。

2. 检查元素是否自动填充：将元素的当前值与记住的值进行比较。如果不同，则触发更改事件。

依赖关系

AngularJS 或 jQuery（适用于其中之一或两者）

github 页面上的更多信息和来源。

可以在此处阅读Github 上的原始 Angular Issue #1460 。

脏代码，请在使用此代码之前检查问题https://github.com/angular/angular.js/issues/1460#issuecomment-18572604是否已修复。该指令在字段被填充时触发事件，而不仅仅是在提交之前（如果您必须在提交之前处理输入，这是必要的）

 .directive('autoFillableField', function() {
    return {
                   restrict: "A",
                   require: "?ngModel",
                   link: function(scope, element, attrs, ngModel) {
                       setInterval(function() {
                           var prev_val = '';
                           if (!angular.isUndefined(attrs.xAutoFillPrevVal)) {
                               prev_val = attrs.xAutoFillPrevVal;
                           }
                           if (element.val()!=prev_val) {
                               if (!angular.isUndefined(ngModel)) {
                                   if (!(element.val()=='' && ngModel.$pristine)) {
                                       attrs.xAutoFillPrevVal = element.val();
                                       scope.$apply(function() {
                                           ngModel.$setViewValue(element.val());
                                       });
                                   }
                               }
                               else {
                                   element.trigger('input');
                                   element.trigger('change');
                                   element.trigger('keyup');
                                   attrs.xAutoFillPrevVal = element.val();
                               }
                           }
                       }, 300);
                   }
               };
});