我在用于登录的部分页面中有以下代码...

<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>


...这是我唯一的主页(索引)中包含的ng。 html):

<body data-ng-controller="controllerLogin">
    <div data-ng-include="getMainpageBasedOnLoginStatus()">
    </div>
</body>


...带有getMainpageBasedOnLoginStatus()函数,返回到上面显示的partials / loginPage.html或partials / mainApplicationPage.html的适当路径(我的主要应用入口点)。通过ng-submit完成的checkCredentials()调用将执行Web服务调用以返回登录成功/失败,并在全局模型变量中进行适当的更新-以便随后对getMainpageBasedOnLoginStatus()的调用返回“确定”。已登录”页面(partials / mainApplicationPage.html)。

此登录方案无法被破解,因为即使将客户端代码以某种方式更改为直接指向主应用程序部分而不是登录部分,服务器端也将无法正常运行(Web服务仅请求将无法运行并返回406错误)。

一切正常-可以。除了...自动填充。

登录名/密码字段既不会自动完成,也不会自动用Chrome 29填充。与Firefox 23中的情况相同:登录名/密码字段不会自动填充,而是登录名一个(仅登录名一个,而不是密码)一个是自动完成的-但不会自动填充。

请注意,我已经在表单和两个输入中使用了HTML5属性'autocomplete'-没有任何结果。

Googling发现了其他面临相关问题的人(记住使用AngularJS和ng-submit的密码),但没有答案...我无法赞成该问题(我还是太绿了,所以明智)。

在AngularJS(https://github.com/angular/angular.js/issues/1460)上还有一张公开票,有效期为7个月,讲述了一个让人有些可悲的故事,即人们对自动填充实际上在“起作用”,对于某些人来说,对于浏览器而言,只是底层模型未更新...以及一个叫做“ bigbag”的人在评论中说,由于这个原因,该功能现在已被禁用。

我发现从AngularJS的角度来看,这是相当不可接受的-当然,我不是第一个需要在他的应用程序表单中进行自动填充/自动填充的人,对吗?还是我必须放弃“单页”理论并返回讨厌的表单操作,并单独使用服务器端提供的login.html / main.html响应才能获得自动填充/自动完成功能?

任何帮助/非常感谢和迫切需要的建议...

评论

令人难以置信:发布此消息2小时后,Firefox 24出现了,可以自动填充了!猜猜我现在也必须等待Chrome修复此问题...

也许您可以检查有关此问题的这篇文章:timothy.userapp.io/post/63412334209 / ...

#1 楼

这是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);
    }
  };
});


然后将指令附加到表单:

<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>


评论


我只是完全实现了该指令,所以它不起作用。这仍然有意义吗?

–Sealer_05
2015年2月10日在23:33

可能并非如此,尤其是在“较小”版本的颠簸方面,Angular核心发生了很多变化。关于它们使用的事件绑定等,我希望我能记录一下为之编写的Angular版本,因为这几乎肯定是解决此问题的一个因素。

–以西结·维克多(Ezekiel Victor)
15年2月13日在4:42

#2 楼

关于自动完成的一件好事是,它保留了$ pristine形式。

您可以进行简单的检查并在需要时获取值:

if($scope.[form_name].$pristine){
   var input document.getElementById([input_id]);
   var input_value = input.value
}


然后您可以提交值或替换它,例如$scope.[module] = input.value