最近，很多前端学生抱怨无法在登录表单中记录自己的账号。对于更经常使用单页应用程序和ajax的网页来说，这是一个常见的问题。

UserApp是一个用angularjs构建的WebApp，但它还不能支持浏览器的“保存密码”功能。以下是发现的一些问题：

表单不能用js动态插入到DOM中。表单实际上必须发出开机自检请求。(无法获取表单内容，然后用ajax发送请求。)当浏览器自动填写表单时，$scope无法获取更新的数据。火狐相对简单。只要表单元素有name属性，就会在触发提交事件后自动提醒用户是否记录数据。

复制代码如下： form name=' log in-form ' ng-submit=' log in()'输入id=' log in ' name=' log in ' type=' text ' ng-model=' user . log in '输入id=' password ' name=' password ' type=' password ' ng-model=' user . password '/form

火狐对记录数据的要求相对简单

然而，firefox有一个问题。自动填写表单后，$scope中的数据将不会更新。所以我谷歌了一下，发现了一些针对这个问题的黑客。但是，我总觉得这些解决方案没有必要，因为我需要的只是在提交表单的时候带上数据，而不是一些笨拙的双向数据绑定技术。所以我采用了一个简单的方法：提交表单时获取表单元素的值。

复制代码如下：美元范围。login=function () {$ scope。用户={login3360 $ ('# login ')。val()，password: $ ('# password ')。val()}；返回false};

好吧，火狐现在很好，但是chrome呢？

Chrome只会在表单实际发起POST请求时提示用户是否存储密码，但之后就不能用Ajax操作了。

以下是解决方案：

当表单发送Post请求时，它用ng-submit拦截它，返回false阻止它，并用ajax提交数据。当ajax成功返回时，将会话保存在cookies中，然后重新提交表单。当页面过载时，您会发现它已经过身份验证，因此将其重定向到主页。这将刷新页面一次，但只需在登录时刷新。只要确保页面返回到相同的地址。但是如果表单被动态添加到DOM中，这个方法仍然不起作用。解决方案是在index.html中添加一个隐藏表单，当需要提交数据时，将其他表单携带的数据复制到隐藏表单中。

我把它打包成一个直接的：

复制代码如下： app . directive(' ngloginsubmit '，function(){ return { restrict 3360 ' a '，scope : { onsubmit 3360 '=ngloginsubmit ' }。link:函数(作用域、元素、属性){ $(元素)[0]。onsubmit=function(){ $(' # log in-log in ')。val($(“# log in”，元素)。val())；$('#login-password ')。val($(“# password”，元素)。val())；

scope . onsubmit(function(){ $(' # log in-form ')[0])。submit()；});返回false};}};});

隐藏在index.html中的表单：

复制代码如下： form name=' log in-form ' id=' log in-form '方法=' post ' action=' style=' display : none；'输入名称=' log in ' id=' log in-log in ' type=' text '输入名称=' password ' id=' log in-password ' type=' password '/form

临时登录表单

复制代码如下： form name=' log in-form ' autocomplete=' on ' ng-log in-submit=' log in ' input id=' log in ' name=' log in ' type=' text ' autocomplete=' on ' input id=' pa ss word ' name=' password ' type=' password ' autocomplete=' on '/form

登录控制器：

复制代码如下：美元范围。login=函数(submit) {$ scope。用户={login3360 $ ('# login ')。val()，password: $ ('# password ')。val()}；

函数AJaxcall back(){ submit()；}

返回false};

刷新时，系统会提示您是否重新提交表单

现在这个问题解决了，但是每次按f5，浏览器都会提醒你是否重新提交表单。这真的很伤人，所以我添加了一个pre-login.html文件，隐藏的表单会在这里提交数据，然后重定向到index.html。

现在没事了~