AngularJS - 使用表单和自动完成 [英] AngularJS - using a form and auto-completion
问题描述
我在用于登录的部分页面中有以下代码...
<form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin"><h2 class="form-signin-heading">登录页面</h2><label for="email"><b>用户电子邮件</b><input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address"><label for="pass"><b>密码</b><input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password"><button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit">登录</button></表单>...这是我唯一的主页(index.html)中包含的ng:
<div data-ng-include="getMainpageBasedOnLoginStatus()">...使用 getMainpageBasedOnLoginStatus() 函数返回到上面显示的 partials/loginPage.html 或 partials/mainApplicationPage.html 的适当路径(我的主要应用程序入口点).通过 ng-submit 完成的 checkCredentials() 调用执行网络服务调用以获取登录成功/失败，并在全局模型变量中进行适当的更新 - 以便后续调用 getMainpageBasedOnLoginStatus() 返回ok-you-are-logged-in"页面 (partials/mainApplicationPage.html).
这个登录方案不能被破解，因为即使客户端代码以某种方式更改为指向 main app 部分而不是 login 部分，服务器端也会根本无法正常运行(Web 服务请求根本无法运行并返回 406 错误).
一切都很好 - 有效.除了...自动填充.
登录名/密码字段既不是自动完成的，也不是 Chrome 29 自动填充的.与 Firefox 23 相同:登录名/密码字段不是自动填充的，但登录名(只有登录名，不是密码！)是自动完成的- 但不会自动填充.
请注意，我在表单和两个输入中都使用了 HTML5 属性自动完成" - 没有任何结果.
谷歌搜索揭示了其他面临相关问题的人(Remember Password with AngularJS and ng-submit ) ，没有答案......我无法支持这个问题(我还太绿了，太明智了).
AngularJS 上也有公开票(https://github.com/angular/angular.js/issues/1460 ) 已经存在了 7 个月，并讲述了人们相当悲惨的故事，其中自动填充实际上在浏览器方面有效"，人们，除了底层模型没有更新......还有一个叫做bigbag"的评论说这个功能现在被禁用了，因为这个原因.
从 AngularJS 的角度来看，我发现这相当不可接受——我肯定不是第一个需要在他的应用程序表单中自动填充/自动完成的人，对吗?或者我是否必须放弃单页理论并恢复到令人讨厌的表单 action 和单独的服务器端提供的 login.html/main.html 响应以使自动填充/自动完成工作?
任何最受赞赏和迫切需要的帮助/建议...
这是语义上合理的 AngularJS 的替代解决方案:http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/
myApp.directive('formAutofillFix', function() {返回函数(范围，元素，属性){//修复 Chrome 错误:https://groups.google.com/forum/#!topic/angular/6NlucSskQjYelem.prop('方法', 'POST');//修复 Angular 不知道自动填充输入的自动填充问题如果(attrs.ngSubmit){设置超时(功能(){elem.unbind('submit').submit(function(e) {e.preventDefault();elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');范围.$应用(attrs.ngSubmit)；});}, 0);}};});然后将指令附加到表单中:
</表单>
I have the following code in a partial page used for login...
<div class="container">
<form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin">
<h2 class="form-signin-heading">Login page</h2>
<label for="email"> <b>User e-mail</b> </label>
<input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address">
<label for="pass"> <b>Password</b> </label>
<input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password">
<button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit">Log in</button>
</form>
</div>
...which is ng-included from my one and only main page (index.html):
<body data-ng-controller="controllerLogin">
<div data-ng-include="getMainpageBasedOnLoginStatus()">
</div>
</body>
...with the getMainpageBasedOnLoginStatus() function returning the appropriate path to either the partials/loginPage.html shown above or the partials/mainApplicationPage.html (my main app entrypoint). The checkCredentials() call done via ng-submit performs a webservice call to get back login success/failure, and does the proper update in a global model variable - so that subsequent calls to getMainpageBasedOnLoginStatus() return the 'ok-you-are-logged-in' page (partials/mainApplicationPage.html).
This login scheme cannot be hacked, because even if the client code is somehow changed to direct to the main app partial instead of the login partial, the server side will simply not function properly (web service requests simply won't function and return 406 errors).
All is well - it works. Except for... autofill.
The login/password fields are neither autocompleted, nor autofilled with Chrome 29. Same in Firefox 23: the login/password fields are not autofilled, but the login one (only the login one, not the password one!) is autocompleted - but not auto-filled.
Note that I have used the HTML5 attribute 'autocomplete' in both the form and the two inputs - with no result whatsoever.
Googling has revealed others who face related issues ( Remember Password with AngularJS and ng-submit ) , with no answer... I could not upvote that question (I am too green yet, SO-wise).
There is also an open ticket on AngularJS ( https://github.com/angular/angular.js/issues/1460 ) that is there for 7 months, and tells the rather sad tale of people where autofill was actually "working", browser-wise, for some people, except that the underlying model was not updated... and a comment there from someone called "bigbag" that the feature is now disabled, for that reason.
I find this rather unacceptable from the point of view of AngularJS - surely I am not the first one that needs autofill/autocomplete in his app's forms, am I? Or do I have to abandon the Single Page theory and revert back to the nasty form action and separate server-side provided login.html/main.html responses to get autofill/autocomplete working?
Any help/advice most appreciated and desperately needed...
Here is an alternative solution that is semantically sound AngularJS: http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/
myApp.directive('formAutofillFix', function() {
return function(scope, elem, attrs) {
// Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
elem.prop('method', 'POST');
// Fix autofill issues where Angular doesn't know about autofilled inputs
if(attrs.ngSubmit) {
setTimeout(function() {
elem.unbind('submit').submit(function(e) {
e.preventDefault();
elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
scope.$apply(attrs.ngSubmit);
});
}, 0);
}
};
});
Then you attach the directive to your form:
<form ng-submit="submitLoginForm()" form-autofill-fix>
<div>
<input type="email" ng-model="email" ng-required />
<input type="password" ng-model="password" ng-required />
<button type="submit">Log In</button>
</div>
</form>
这篇关于AngularJS - 使用表单和自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
