javascript - AngularJS "ng-submit"在浏览器预填充表单字段时出现问题？

Question

我是 AngularJS 的新手，正在试验具有“登录”表单的单页应用程序。该表单由“ng-submit”绑定(bind)，如果身份验证成功，它的 Controller 会进行 AJAX 调用并返回 token 。随后的 AJAX 调用传递此 token 。 (不，我不想使用基本身份验证，因为我想要一个非 hacky 的“注销”按钮)。

我已将我的用户名和密码字段设置为“必填”，这样当用户尝试提交字段中包含空白值的表单时，AngularJS 将显示工具提示:

<form name="loginForm" ng-submit="login()">
    <fieldset>
        <legend>Sign In</legend>
        <label>Email</label>
        <input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required>
        <label>Password</label>
        <input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required>
        <br/>
        <button type="submit" class="btn">Login</button>
    </fieldset>
</form>

当某些浏览器(至少是 Firefox)询问用户是否希望浏览器记住用户名和密码并在下次预填充时，就会出现问题。

当浏览器填充这些字段中的任何一个时，AngularJS 基本上停止工作。 “ng-submit”绑定(bind)的表单不会提交...根本不会调用绑定(bind)的 Controller 函数。我的第一个想法是预填充的字段没有触发事件，所以 AngularJS 认为它们仍然是空白的。但是，没有弹出工具提示来警告空白字段。这就像 AngularJS 完全关闭了。

奇怪的是，一旦您对任一字段进行任何手动编辑，AngularJS 就会恢复生机……验证工具提示和表单提交再次开始工作。

是这里有bug，还是我这边知识不够的问题？你如何让 AngularJS 识别浏览器填充的字段？或者，如果这方面存在问题，您如何防止浏览器预填充字段，以免它们干扰 AngularJS？

Answer 1

$(window).load(function() {
  // updates autofilled fields
  window.setTimeout(function() {
    $('input[ng-model]').trigger('input');
  }, 100);
});