Question

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

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

...这是我的唯一主页（index.html）中包含的ng：

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

...使用 getMainpageBasedOnLoginStatus（）函数返回上面显示的 partials / loginPage.html 或 partials / mainApplicationPage.html的相应路径（我的主要app入口点）。通过ng-submit完成的 checkCredentials（）调用执行webservice调用以获取登录成功/失败，并在全局模型变量中进行正确更新 - 以便后续调用 getMainpageBasedOnLoginStatus（）返回'ok-you-are-logged-in'页面（ partials / mainApplicationPage.html ）。

此登录方案无法被黑客攻击，因为即使客户端代码以某种方式更改为指向主应用程序部分而不是登录部分，服务器端也将根本无法正常运行（Web服务请求根本无法运行并返回406错误）。

一切都很好 - 它有效。除了...自动填充。

登录/密码字段既不会自动填充，也不会自动填充Chrome 29.在Firefox 23中也是如此：登录/密码字段未自动填充，但登录密码字段（仅登录密码，而不是密码密码！）自动填充 - 但不是自动填充。

请注意，我在表单和两个输入中都使用了HTML5属性“autocomplete” - 没有任何结果。

谷歌搜索已经揭露了其他面临相关问题的人（Remember Password with AngularJS and ng-submit），没有回答......我无法回答这个问题（我太绿了，不过很明智）。

还有一个关于AngularJS（https://github.com/angular/angular.js/issues/1460）的开放票，有7个月了，并讲述了自动填充实际上“工作”的人的相当悲惨的故事，浏览器方面，对于某些人来说，除了底层模型没有更新......以及来自某个名为“bigbag”的人的评论，因此该功能现已被禁用。

从AngularJS的角度来看，我觉得这是不可接受的 - 我肯定不是第一个需要在他的应用程序表单中自动填充/自动填充的人，是吗？或者我是否必须放弃单页理论并恢复讨厌的形式动作并单独提供服务器端提供的login.html / main.html响应以使自动填充/自动完成工作？

任何最受赞赏和迫切需要的帮助/建议......

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

Answer 2

关于自动完成的一个好处是它保留了$ pristine形式。

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

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

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

AngularJS - 使用表单和自动完成

2 个答案: