让AngularJS支持浏览器自动填充

许多前端学生最近抱怨登陆表单不能记录他们的帐户，这是一个单页（单页应用程序）和使用Ajax的更多网页的常见问题。

UserApp是一个开源的基于AngularJS，但他已不能支持保存密码的浏览器功能。

列出下列问题。

无法用js动态地将表单插入到DOM中。

表单必须真正发出POST请求。（您不能获得表单内容，然后用Ajax发送请求）

当浏览器自动填充表时，$范围不能获得更新的数据。

Firefox是相对简单的，只要表单元素有一个触发提交事件的name属性，它就会自动提醒用户是否记录数据。

复制代码代码如下所示：
Firefox记录数据的要求很简单。
但有火狐在美元范围的数据将不被表的自动灌装后更新的问题。所以我有一个谷歌，发现这个问题有些黑客。但总觉得这些解决方案是不必要的，因为我只需要提交的数据时，我提交的形式，而不是一些非常数据绑定技术。所以我用一个非常简单的方法来获取表单元素的值时，表单提交。

复制代码代码如下所示：

scope.login美元=函数（）{

scope.user美元= { {

登录：$（#登录）。瓦迩（），

密码：$（#密码）的瓦迩（）。

}；

…

返回false；

}；
好了，现在火狐没问题，但是Chrome呢

Chrome只在表单表单真正启动POST请求时，才会提示用户存储密码，但这不能用Ajax操作。

以下是解决方案：

当表单发送一个POST请求时，它会用NG提交并返回false以防止它，同时用Ajax提交数据。

当Ajax成功返回时，会话存储在cookie中，表单被重新提交到侧。

当页面重载，发现它已被认证和重定向到主页。

这将刷新页面一次，但它需要在登录时刷新，确保页面返回时是相同的地址。

但如果形式动态添加到DOM，该方法仍不工作，解决方法是添加index.html隐藏的窗体，然后将数据从其他形式的隐藏的表单数据提交时。

我把它打包成指令：

复制代码代码如下所示：

app.directive（ngloginsubmit

返回{

限制：

经营范围：{

onsubmit：= ngloginsubmit

}，

链接：功能（范围、元素、属性）{

$（元）{ 0 }。onsubmit =函数（）{（）

$（#登陆）。瓦迩（$（#登录

$（#登录密码）。瓦迩（$（#密码

Scope.onSubmit（function（）{（）

$（#登录表单）{ 0 }提交（）；

}）；

返回false；

}；

}

}；

}）；
在文件隐藏的形式：

复制代码代码如下所示：
临时登录表单

复制代码代码如下所示：
控制器：用于登录

复制代码代码如下所示：

scope.login美元=功能（提交）{

scope.user美元= { {

登录：$（#登录）。瓦迩（），

密码：$（#密码）的瓦迩（）。

}；

功能ajaxcallback（）{

提交（）；

}

返回false；

}；
刷新会提示重新提交表单
现在是解决这一问题，但当你按下F5，浏览器会提醒你如果你想提交表单，它真的很痛，所以我添加了一个pre-login.html文件，隐藏的形式将数据提交到这里，然后重定向到index.html。

现在好了—