Laissez Angularjs prendre en charge le remplissage automatique des formulaires du navigateur_AngularJS

Récemment, de nombreux étudiants front-end se sont plaints du fait que le formulaire de connexion ne peut pas enregistrer leur propre compte. Il s'agit toujours d'un problème courant pour les applications monopages et les pages Web qui utilisent beaucoup Ajax.

UserApp est une WebApp construite à l'aide d'angularjs, mais elle n'a pas été en mesure de prendre en charge la fonctionnalité « enregistrer le mot de passe » du navigateur.
Voici quelques-uns des problèmes trouvés :

Le formulaire ne peut pas être inséré dynamiquement dans le DOM à l'aide de js.
Le formulaire doit effectivement faire une requête POST. (Vous ne pouvez pas obtenir le contenu du formulaire puis faire une demande avec ajax)
Lorsque le navigateur remplit automatiquement le formulaire, $scope ne peut pas obtenir les données mises à jour.
Firefox est relativement simple. Tant que l'élément de formulaire a un attribut de nom et que l'événement de soumission est déclenché, il rappellera automatiquement à l'utilisateur s'il doit enregistrer des données.

Copier le code Le code est le suivant :

Les conditions requises pour que Firefox enregistre des données sont relativement simples

Mais il y a un problème avec Firefox. Après avoir rempli automatiquement le formulaire, les données dans $scope ne seront pas mises à jour. J'ai donc cherché sur Google et trouvé quelques hacks pour ce problème. Mais j'ai toujours l'impression que ces solutions sont inutiles, car tout ce dont j'ai besoin est d'apporter les données lors de la soumission du formulaire, et non une technologie de liaison de données bidirectionnelle très glissante. J'ai donc adopté une méthode très simple : récupérer la valeur de l'élément du formulaire lors de la soumission du formulaire.

Copier le code Le code est le suivant :

$scope.login = fonction() {
$scope.user = {
Connexion : $("#login").val(),
Mot de passe : $("#password").val()
};
...
Renvoie faux ;
};

OK, maintenant il n'y a plus de problème avec Firefox, mais qu'en est-il de Chrome ?

Chrome demandera à l'utilisateur s'il doit stocker le mot de passe uniquement lorsque le formulaire lance réellement une requête POST, mais dans ce cas, il ne peut pas être utilisé avec Ajax.

Voici la solution :

Lorsque le formulaire émet une demande de publication, utilisez ng-submit pour l'intercepter, renvoyez false pour la bloquer et utilisez ajax pour soumettre les données.
Lorsque ajax revient avec succès, la session est stockée dans des cookies et le formulaire est soumis à nouveau.
Lorsque la page sera rechargée, on constatera qu'elle a été authentifiée et elle sera redirigée vers la page d'accueil.
Cela entraînera l'actualisation de la page une fois, mais elle ne devra être actualisée que lors de la connexion. Assurez-vous simplement que la page renvoie à la même adresse.
Mais si le formulaire est ajouté dynamiquement au DOM, cette méthode ne fonctionnera toujours pas. La solution consiste à ajouter un formulaire masqué dans index.html et, lorsque vous devez soumettre des données, à copier les données contenues dans d'autres formulaires dans le formulaire masqué.

Je l'ai emballé dans une directive :

Copier le code Le code est le suivant :

app.directive("ngLoginSubmit", function(){
revenir {
restreindre : "A",
Portée : {
onSubmit : "=ngLoginSubmit"
},
Lien : fonction (portée, élément, 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 ;
        };
>
};
});

Formulaire caché dans index.html :

Copier le code Le code est le suivant :

Formulaire de connexion temporaire

Copier le code Le code est le suivant :

Contrôleur de connexion :

Copier le code Le code est le suivant :

$scope.login = fonction (soumettre) {
$scope.user = {
Connexion : $("#login").val(),
Mot de passe : $("#password").val()
};

fonction ajaxCallback() {
soumettre();
}  

return false;
};

Lors de l'actualisation, il vous sera demandé si vous souhaitez soumettre à nouveau le formulaire

Maintenant, ce problème est résolu, mais chaque fois que vous appuyez sur f5, le navigateur vous rappellera si vous devez soumettre à nouveau le formulaire. C'était un peu pénible, j'ai donc ajouté un fichier pre-login.html dans lequel le formulaire caché soumettrait des données, puis redirigerait vers index.html.

Tout va bien maintenant~