让angularjs支持浏览器自动填表
最近有很多前端同学都抱怨说，登陆表单都不能记录自己的账号。这对于用单页面(single-page applications)和使用ajax比较多的网页来说，还是一个蛮普遍的问题。
UserApp是一个使用angularjs构建的WebApp，但是他一直未能支持浏览器的"save password"特性。
下面就列出了一些发现的问题：
表单不能用js动态的插入DOM。
表单必须真正的发出一个POST请求。（不能获取表单内容，然后用ajax发出请求）
当浏览器自动填表后，$scope并不能获得更新后的数据。
Firefox相对来说简单一点，只要表单元素有name属性，触发提交事件之后，它就会自动提醒用户是否记录数据。
<form name="login-form" ng-submit="login()">
<input id="login" name="login" type="text" ng-model="user.login">
<input id="password" name="password" type="password" ng-model="user.password">
</form>
firefox记录数据的要求比较简单
但是firefox有一个问题，在自动填表之后，$scope里的数据并不会更新。所以我google了一下，发现了一些针对此问题的hacks。但是总感觉这些解决方案没必要，因为我需要的只是在提交表单的时候将数据带上，而不是一些很溜逼的数据双向绑定技术。所以我就采用了很简单的办法：在提交表单的时候获取表单元素的值。
$scope.login = function() {
$scope.user = {
login: $("#login").val(),
password: $("#password").val()
};
...
return false;
};
OK,现在firefox没问题了，但是chrome怎么办呢？
chrome只有在form表单真正发起POST请求的时候才会提示用户是否储存密码，但这样的话就不能用Ajax操作了。
下面是解决办法：
当表单发出Post请求时，用ng-submit截取，返回false将其阻止，同时用ajax提交数据。
当ajax成功返回时，将session储存在cookies里，再将表单重新提交一边。
页面重载的时候会发现已经认证过了，就将其重定向到主页。
这会让页面刷新一次，但也就是登录的时候需要刷新而已，确保页面返回时是同一个地址就行了。
但如果表单是被动态添加进DOM的时候，这个方法仍然不行。解决方案就是在index.html中添加一个隐藏的表单，需要提交数据的时候就将其它表单携带的数据复制到隐藏表单里。
我将它打包成了一个directive：
app.directive("ngLoginSubmit", function(){
return {
restrict: "A",
scope: {
onSubmit: "=ngLoginSubmit"
},
link: function(scope, element, attrs) {
$(element)[0].onsubmit = function() {
$("#login-login").val($("#login", element).val());
$("#login-password").val($("#password", element).val());
scope.onSubmit(function() {
$("#login-form")[0].submit();
});
return false;
};
}
};
});
在index.html里隐藏的表单：
<form name="login-form" id="login-form" method="post" action="" style="display: none;">
<input name="login" id="login-login" type="text">
<input name="password" id="login-password" type="password">
</form>
临时登录表单
<form name="login-form" autocomplete="on" ng-login-submit="login">
<input id="login" name="login" type="text" autocomplete="on">
<input id="password" name="password" type="password" autocomplete="on">
</form>
登录用的controller:
$scope.login = function(submit) {
$scope.user = {
login: $("#login").val(),
password: $("#password").val()
};
function ajaxCallback() {
submit();
}
return false;
};
刷新时会提示是否重新提交表单
现在这个问题解决了，但是每当你按下f5的时候，浏览器都会提醒你要不要重新提交表单。这确实有点蛋疼，所以我添加了一个pre-login.html文件，隐藏的表单会提交数据到这里，然后再重定向到index.html。
现在OK了～
相关文章
这篇文章主要介绍了浅谈AngularJS中$http服务的简单用法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下2018-09-09
AngularJs Using $location详解及示例代码
本文主要介绍AngularJs Using $location的知识资料，这里整理了相关的资料，及简单示例代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要为大家详细介绍了AngularJS表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了在angular 6中使用 less 的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴2016-07-07
本篇文章主要介绍了从零搭建一个angular4.0项目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下2019-08-08
Angular2中Bootstrap界面库ng-bootstrap详解
不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。2016-10-10
这篇文章主要介绍了angularjs 处理多个异步请求方法汇总,需要的朋友可以参考下2015-01-01
最新评论