9

我对 AngularJS 相当陌生，并且正在尝试使用具有“登录”表单的单页应用程序。该表单由“ng-submit”绑定，如果身份验证成功，它的控制器会进行 AJAX 调用，返回一个令牌。随后的 AJAX 调用传递此令牌。（不，我不想使用基本身份验证，因为我想要一个非 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”绑定的表单不会提交……绑定的控制器函数根本没有被调用。我的第一个想法是预填充的字段没有触发事件，所以 AngularJS 认为它们仍然是空白的。但是，没有弹出工具提示来警告空白字段。就像 AngularJS 完全关闭一样。

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

这里有错误，还是我缺乏知识的问题？如何让 AngularJS 识别浏览器填充的字段？或者如果这方面有问题，你怎么能阻止浏览器预先填充字段，这样它们就不会干扰 AngularJS？

4

2 回答 2

5 
$(window).load(function() {
  // updates autofilled fields
  window.setTimeout(function() {
    $('input[ng-model]').trigger('input');
  }, 100);
});
于 2013-10-22T04:42:06.797 回答
3

问题来自浏览器在自动填充时没有发送任何事件的事实。它被报告为 Angular 的 BT 上的一个问题。

https://github.com/angular/angular.js/issues/1460

但我怀疑它会从 Angular 中修复，因为它更多的是浏览器问题。

所以解决方案是做一些肮脏的黑客攻击，比如设置一个计时器并将模型的状态设置为“脏”或从表单触发事件。

你可以在这里看到一些尝试 AngularJS browser autofill workaround by using a directive

于 2013-06-21T03:58:47.090 回答