AngularJS navigateur remplissage automatique de la solution en utilisant une directive

Apparemment c'est un problème connu avec Angulaires et est actuellement ouvert

Je ne suis pas sûr de ce que vous pourriez faire ici à part une sorte de travail autour de vous comme vous êtes à essayer. Il semble que vous êtes sur la bonne voie. Je ne pouvais pas obtenir mon navigateur pour essayer de vous souvenir d'un mot de passe pour votre plunk, donc je ne suis pas sûr si cela va fonctionner, mais regardez:

app.directive('autoFillSync', function($timeout) {
   return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModel) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(ngModel.$pristine && origVal !== newVal) {
                  ngModel.$setViewValue(newVal);
              }
          }, 500);
      }
   }
});

<form name="myForm" ng-submit="login()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
   <button type="submit">Login</button>
</form>

Je pense que vous avez juste besoin de simplifier votre approche un peu. La seule chose que je vous recommande vraiment de est de vérifier ngModel.$pristine et assurez-vous que vous n'êtes pas d'écraser le pauvre utilisateur d'entrée. Aussi, 3 secondes est probablement trop long. Vous ne devriez pas avoir à appeler $apply () $timeout, BTW, il devrait mettre un $digest automatiquement pour vous.

Le vrai catch: votre navigateur battre Angulaire de l'exécution? Mon navigateur?

C'est probablement une guerre impossible à gagner, c'est pourquoi Angulaire (ou knock-out) n'a pas été en mesure de le résoudre facilement. Il n'y a aucune garantie de l'état des données dans votre entrée au moment de la directive de l'exécution initiale. Pas même au moment de l'Angulaire de l'initialisation.... C'est donc un problème difficile à résoudre.

OriginalL'auteur Ben Lesh

Vous n'avez pas à utiliser un $timeout ou quelque chose comme cela. Vous pouvez utiliser un système d'événements.

Je pense que c'est plus Angularish et ne dépend pas de jQuery ou d'un événement personnalisé attraper.

Par exemple sur votre gestionnaire de soumission:

$scope.doLogin = function() {
    $scope.$broadcast("autofill:update");

    //Continue with the login.....
};

Et puis vous pouvez avoir une autofill directive comme ceci:

.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    }
});

Enfin, votre code HTML sera comme:

<input type="text" name="username" ng-model="user.id" autofill="autofill"/>

OriginalL'auteur bekos

Pas besoin de hack plus! Angulaire dev tbosch fait un polyfill qui déclenche un événement de changement lorsque le navigateur changements de champs de formulaire sans le déclenchement d'un événement de changement:

https://github.com/tbosch/autofill-event

Pour l'instant ils ne sont pas dans l'angle de code, comme c'est une correction de bug pour le navigateur, et fonctionne aussi sans Angulaire (par exemple, pour la plaine de jQuery apps).

"Le polyfill va rechercher les modifications sur le document de charge et également lorsqu'une entrée est à gauche (dans la même forme). Cependant, vous pouvez déclencher le vérifier manuellement si vous le souhaitez.

Le projet a des tests unitaires ainsi que des semi automatique de tests, de sorte que nous avons enfin un endroit pour rassembler tous les différents cas d'utilisation, de concert avec les paramètres du navigateur.

Veuillez noter: Ce polyfill fonctionne avec la plaine AngularJS apps, avec AngularJS/jQuery applications, mais aussi avec la plaine jQuery applications qui n'utilisent pas Angulaire."

Il peut être installé:

bower install autofill-event --save

Ajouter le script autofill-event.js après jQuery ou Angulaire dans votre page.

Cela va faire ce qui suit:

• après DOMContentLoaded: vérifier tous les champs de saisie
• un champ est laissé: vérifiez tous les autres champs de la même forme

API (pour déclencher manuellement la case):

• $el.checkAndTriggerAutoFillEvent(): Exécuter la vérification de tous les éléments du DOM dans le jQuery /jQLite élément.

Comment il fonctionne

1. Rappelez-vous toutes les modifications apportées aux éléments d'entrée par l'utilisateur (à l'écoute des événements de changement) et aussi par JavaScript (en interceptant $el.val() de jQuery /jQLite éléments). Qui a changé la valeur est stockée sur l'élément dans une propriété privée.

2. Vérification d'un élément de remplissage automatique: Comparer la valeur actuelle de l'élément avec la rappeler valeur. Si c'est différent, déclencher un événement de changement.

Dépendances

AngularJS ou jQuery (fonctionne avec l'un ou les deux)

Plus d'infos et source sur le page github.

D'origine Angulaire de la Question n ° 1460 sur Github peut être lu ici.

OriginalL'auteur orszaczky

Solution 1 [à l'Aide de $timeout]:

Directive:

app.directive('autoFillSync', function($timeout) {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, model) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(model.$pristine && origVal !== newVal) {
                  model.$setViewValue(newVal);
              }
          }, 500);
      }
    };
});

HTML:

<form name="myForm" ng-submit="login()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
   <button type="submit">Login</button>
</form>

Solution 2 [Aide angulaire des événements]:

Ref: Becko réponse

Directive:

app.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    };
});

HTML:

<form name="myForm" ng-submit="login()">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" ng-model="username" autofill/><br/>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" ng-model="password" autofill/><br/>
  <button type="submit">Login</button>
</form>

Solution 3 [à l'Aide de relais des appels de méthode]:

Directive:

app.directive('autoFill', function() {
    return {
        restrict: 'A',
        link: function(scope,element) {
            scope.submit = function(){
                scope.username = element.find("#username").val();
                scope.password = element.find("#password").val();
                scope.login();//call a login method in your controller or write the code here itself
            }

        }
    };
});

HTML:

<form name="myForm" auto-fill ng-submit="submit()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" />
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" />
   <button type="submit">Login</button>
</form>

OriginalL'auteur Robin Rizvi

C'est jQuery façon :

$(window).load(function() {
   //updates autofilled fields
   window.setTimeout(function() {
     $('input[ng-model]').trigger('input');
   }, 100);
 });

C'est Angulaire moyen :

 app.directive('autofill', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            $timeout(function(){
                $(elem[0]).trigger('input');
                //elem.trigger('input'); try this if above don't work
            }, 200)
        }
    }
}]);

HTML

<input type="number" autofill /> 

OriginalL'auteur Nishchit Dhanani

C'est la seule solution que j'ai trouvé qui a permis à tous de mon Angulaire' validations de fonctionner comme prévu, y compris désactiver/activer de bouton soumettre. S'installe avec tonnelle et 1 balise de script. Bazinga!

https://github.com/tbosch/autofill-event

OriginalL'auteur Roland Hordos

One-liner solution de contournement dans le gestionnaire de soumission (nécessite jQuery):

if (!$scope.model) $scope.model = $('#input_field').val();

OriginalL'auteur archpollux

Je suis très nouveau à Angularjs, mais j'ai trouvé une solution simple à ce problème=>
Force Angulaire de réévaluer expression... en changeant de!
(bien sûr, vous devez vous rappeler la valeur initiale pour revenir à l'état initial)
Ici est la façon dont il va dans votre fonction de contrôleur de soumission du formulaire:

    $scope.submit = function () {
                var oldpassword = $scope.password;
                $scope.password = '';
                $scope.password = oldpassword;
//rest of your code of the submit function goes here...

où bien sûr, la valeur entrée dans votre mot de passe d'entrée a été fixé par les fenêtres et pas par l'utilisateur.

OriginalL'auteur Le neveu

Une modification mineure à la présente réponse (https://stackoverflow.com/a/14966711/3443828): utiliser un $intervalle au lieu de $timeout de sorte que vous n'avez pas de course le navigateur.

mod.directive('autoFillSync', function($interval) {
    function link(scope, element, attrs, ngModel) {
        var origVal = element.val();
        var refresh = $interval(function() {
          if (!ngModel.$pristine) {
            $interval.cancel(refresh);
          }else{
            var newVal = element.val();
            if (origVal !== newVal) {
              ngModel.$setViewValue(newVal);
              $interval.cancel(refresh);
            }
          }
        }, 100);
    }

    return {
      require: 'ngModel',
      link: link
    }
  });

OriginalL'auteur user3443828

Solution sans directives:

.run(["$window", "$rootElement", "$timeout", function($window, $rootElement, $timeout){

        var event =$window.document.createEvent("HTMLEvents");
        event.initEvent("change", true, true);

        $timeout(function(){

            Array.apply(null, $rootElement.find("input")).forEach(function(item){
                if (item.value.length) {
                    item.$$currentValue = item.value;
                    item.dispatchEvent(event);
                }
            });

        }, 500);
    }])

OriginalL'auteur ReklatsMasters

Aucune de ces solutions n'a fonctionné pour mon cas d'utilisation. J'ai certains champs du formulaire qui utilisent ng-changement de regarder pour le changement. À l'aide de $watch n'est d'aucun secours car il n'est pas déclenché par le remplissage automatique. Depuis je n'ai pas de bouton "soumettre" il n'est pas facile à exécuter certaines des solutions et je n'ai pas réussi à l'aide d'intervalles.

J'ai fini par désactiver la saisie automatique - pas idéal, mais beaucoup moins à confusion pour l'utilisateur.

<input readonly onfocus="this.removeAttribute('readonly');">

Trouvé la réponse ici

OriginalL'auteur cyberwombat

Si vous voulez le garder simple il suffit d'obtenir la valeur à l'aide de javascript

Dans votre angular js contrôleur :

var username = document.getElementById('username').valeur;

OriginalL'auteur user361697