4

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

<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（我的主应用程序入口点）的适当路径。通过 ng-submit 完成的checkCredentials()调用执行 web 服务调用以获取登录成功/失败，并在全局模型变量中进行正确更新 - 以便随后对getMainpageBasedOnLoginStatus()的调用返回“ok-you- are-”登录页面 ( partials/mainApplicationPage.html )。

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

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

登录名/密码字段既不是自动完成的，也不是 Chrome 29 自动填充的。在 Firefox 23 中也是如此：登录名/密码字段不是自动填充的，但登录名（只有登录名，不是密码！）是自动完成的 - 但不是自动填充。

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

谷歌搜索揭示了其他面临相关问题的人（使用 AngularJS 和 ng-submit 记住密码），但没有答案......我无法投票赞成这个问题（我还太绿了，非常明智）。

还有一张关于 AngularJS ( https://github.com/angular/angular.js/issues/1460 ) 的公开票已经存在了 7 个月，并讲述了自动填充实际上“工作”的人们相当悲伤的故事，浏览器方面，对于某些人来说，除了底层模型没有更新......还有一个叫做“bigbag”的人评论说这个功能现在被禁用了，出于这个原因。

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

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

4

2 回答 2

5

这是语义上合理的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>
于 2014-01-12T09:25:40.617 回答
2

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

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

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

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

于 2014-03-28T00:28:18.180 回答