从 AngularJS 的单页应用程序保存 Chrome 的自动填充答案

【问题标题】：Save on Chrome's autofill from an AngularJS's single page application从 AngularJS 的单页应用程序保存 Chrome 的自动填充
【发布时间】：2014-11-29 09:56:57
【问题描述】：

如何让我的 AngularJS 单页应用程序在提交表单时在浏览器的自动填充设置中注册用户的输入？ Angular 并没有真正以“默认”方式提交表单，因此浏览器不会捕获输入。

以下内容不会保存在 Chrome 的自动填充中：

<form id="header-search" class="navbar-form form-inline" ng-submit="submit()">
    <input type="search" name="q" ng-model="Search.term" ng-required="true"/>
    <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>

它适用于 <form action='/search'>，但我不会通过发布和返回来破坏我的 SPA 行为。

【问题讨论】：

标签： angularjs single-page-application autofill

【解决方案1】：

没有任何代码，很难说出问题所在。使用angular forms 和ngSubmit，应该允许以足够正常的方式提交表单以触发自动完成。

【讨论】：

用我的例子更新了。

【解决方案2】：

我在登录表单中遇到了类似的问题，其中 Chrome 自动填充了用户名和密码。我在登录控制器中添加了以下代码：

$(document).ready( function() {
    $timeout(function(){
        $scope.username = $('div#login input[name="username"]').val();
        $scope.password = $('div#login input[name="password"]').val();
     },300);  
});

您还可以尝试在所有输入元素上触发输入以强制更新 ngModel。我认为这也应该有效。

$('yourInputsIdentifier').trigger('input');

【讨论】：

我的模型正在正确同步，他们没有做的是在我发布时保存在 Chrome 的自动填充中。我没有更新 ngModel 的问题。