Soluzione alternativa di compilazione automatica del browser AngularJS utilizzando una direttiva

Quando si invia un modulo in AngularJS e si utilizza la funzionalità di memorizzazione della password del browser, e in un successivo tentativo di accesso si consente al browser di compilare il modulo di accesso con il nome utente e la password, il $scopemodello non verrà modificato in base alla compilazione automatica.

L'unico trucco sporco che ho trovato è usare la seguente direttiva:

app.directive("xsInputSync", ["$timeout" , function($timeout) {
    return {
        restrict : "A",
        require: "?ngModel",
        link : function(scope, element, attrs, ngModel) {
            $timeout(function() {
                if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) {
                    scope.apply(function() {
                        ngModel.$setViewValue(element.val());
                    });
                }
                console.log(scope);
                console.log(ngModel.$name);
                console.log(scope[ngModel.$name]);
            }, 3000);
        }
    };
}]);

Il problema è che ngModel.$setViewValue(element.val());non cambia il modello né la vista in base al element.val()valore restituito. Come posso farlo?

Apparentemente questo è un problema noto con Angular ed è attualmente aperto

Non sono sicuro di cosa potresti fare qui oltre a una sorta di lavoro in giro come se stessi provando. Sembra che tu sia sulla strada giusta. Non sono riuscito a far provare al mio browser a ricordare una password per il tuo plunk, quindi non sono sicuro che funzionerà, ma dai un'occhiata:

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>

Penso che tu debba solo semplificare un po 'il tuo approccio. L'unica cosa che consiglio vivamente è di controllare ngModel.$pristinee assicurarti di non sovrascrivere l'input di un utente scarso. Inoltre, 3 secondi sono probabilmente troppo lunghi. Non dovresti chiamare $ apply () in un $ timeout, BTW, dovrebbe mettere automaticamente in coda un $ digest per te.

Il vero problema: il tuo browser batterà Angular fino all'esecuzione? E il mio browser?

Questa è probabilmente una guerra impossibile da vincere, motivo per cui Angular (o Knockout) non è stata in grado di risolverla prontamente. Non c'è alcuna garanzia dello stato dei dati nel tuo input al momento dell'esecuzione iniziale della direttiva. Nemmeno al momento dell'inizializzazione di Angular ... Quindi è un problema difficile da risolvere.

Ecco una soluzione che è molto meno hacky rispetto ad altre soluzioni presentate ed è semanticamente valida 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);
    }
  };
});

Quindi alleghi semplicemente la direttiva al tuo modulo:

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

Non devi usare un $timeouto qualcosa di simile. È possibile utilizzare un sistema di eventi.

Penso che sia più angolare e non dipende da jQuery o dall'acquisizione di eventi personalizzati.

Ad esempio sul tuo gestore di invio:

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

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

E poi puoi avere una autofilldirettiva come questa:

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

Infine, il tuo codice HTML sarà come:

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

Non c'è più bisogno di hackerare! Angular dev tbosch ha creato un polyfill che attiva un evento di modifica quando il browser modifica i campi del modulo senza attivare un evento di modifica:

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

Per ora non lo inseriranno nel codice Angular, poiché si tratta di una correzione di bug per il browser e funziona anche senza Angular (ad esempio per le semplici app jQuery).

"Il polyfill verificherà le modifiche al caricamento del documento e anche quando viene lasciato un input (solo nella stessa forma). Tuttavia, se lo desideri, puoi attivare il controllo manualmente.

Il progetto ha test unitari e test semi automatici, quindi abbiamo finalmente un posto dove raccogliere tutti i diversi casi d'uso insieme alle impostazioni del browser richieste.

Nota: questo polyfill funziona con app AngularJS semplici, con app AngularJS / jQuery ma anche con app jQuery semplici che non utilizzano Angular. "

Può essere installato con:

bower install autofill-event --save

Aggiungi lo script autofill-event.js dopo jQuery o Angular nella tua pagina.

Questo farà quanto segue:

• dopo DOMContentLoaded: controlla tutti i campi di input
• è rimasto un campo: controlla tutti gli altri campi nella stessa forma

API (per attivare manualmente il controllo):

• $el.checkAndTriggerAutoFillEvent(): Esegue il controllo di tutti gli elementi DOM nell'elemento jQuery / jQLite specificato.

Come funziona

1. Ricorda tutte le modifiche agli elementi di input da parte dell'utente (ascoltando eventi di modifica) e anche da JavaScript (intercettando $ el.val () per gli elementi jQuery / jQLite). Il valore modificato viene memorizzato sull'elemento in una proprietà privata.

2. Controllo di un elemento per il riempimento automatico: confronta il valore corrente dell'elemento con il valore memorizzato. Se è diverso, attiva un evento di modifica.

dipendenze

AngularJS o jQuery (funziona con uno o entrambi)

Maggiori informazioni e fonte sulla pagina GitHub .

Il numero originale angolare n. 1460 su Github può essere letto qui.

Codice sporco, controlla se il problema https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 è stato risolto prima di utilizzare questo codice. Questa direttiva attiva gli eventi quando il campo è riempito, non solo prima dell'invio (è necessario se devi gestire l'input prima dell'invio)

 .directive('autoFillableField', function() {
    return {
                   restrict: "A",
                   require: "?ngModel",
                   link: function(scope, element, attrs, ngModel) {
                       setInterval(function() {
                           var prev_val = '';
                           if (!angular.isUndefined(attrs.xAutoFillPrevVal)) {
                               prev_val = attrs.xAutoFillPrevVal;
                           }
                           if (element.val()!=prev_val) {
                               if (!angular.isUndefined(ngModel)) {
                                   if (!(element.val()=='' && ngModel.$pristine)) {
                                       attrs.xAutoFillPrevVal = element.val();
                                       scope.$apply(function() {
                                           ngModel.$setViewValue(element.val());
                                       });
                                   }
                               }
                               else {
                                   element.trigger('input');
                                   element.trigger('change');
                                   element.trigger('keyup');
                                   attrs.xAutoFillPrevVal = element.val();
                               }
                           }
                       }, 300);
                   }
               };
});

Sembra una soluzione chiara e diretta. Non è necessario jQuery.

AGGIORNARE:

• Il modello viene aggiornato solo quando il valore del modello non è uguale al valore di input effettivo.
• Il controllo non si ferma al primo riempimento automatico. Nel caso in cui desideri utilizzare un altro account, ad esempio.

app.directive('autofillable', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            scope.check = function(){
                var val = elem[0].value;
                if(ctrl.$viewValue !== val){
                    ctrl.$setViewValue(val)
                }
                $timeout(scope.check, 300);
            };
            scope.check();
        }
    }
}]);

Soluzione 1 [utilizzando $ timeout]:

Direttiva:

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>

Soluzione 2 [Utilizzo di eventi angolari]:

Rif: risposta di Becko

Direttiva:

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>

Soluzione 3 [Utilizzo delle chiamate con metodo di inoltro]:

Direttiva:

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>

Bene, il modo più semplice è emulare il comportamento del browser, quindi se c'è un problema con l'evento di modifica, lancialo tu stesso. Molto più semplice.

Direttiva:

yourModule.directive('triggerChange', function($sniffer) {
    return {
        link : function(scope, elem, attrs) {
            elem.on('click', function(){
                $(attrs.triggerChange).trigger(
                    $sniffer.hasEvent('input') ? 'input' : 'change'
                );
            });
        },
        priority : 1
    }
});

HTML:

<form >
    <input data-ng-model="user.nome" type="text" id="username">

    <input data-ng-model="user.senha" type="password" id="password" >

    <input type="submit" data-ng-click="login.connect()" id="btnlogin" 
           data-trigger-change="#password,#username"/>
</form>

Puoi fare alcune variazioni, come mettere la direttiva sul form e attivare l'evento su tutti gli input con la classe .dirty nel form submit.

Questo è il modo jQuery:

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

Questo è il modo angolare:

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

Ecco un'altra soluzione alternativa meno complicata, ma richiede del codice aggiuntivo nel controller.

HTML:

<form ng-submit="submitForm()" ng-controller="FormController">
    <input type="text" ng-model="username" autocomplete-username>
    <input type="submit">
</form>

Direttiva (CoffeeScript):

directives.directive 'autocompleteUsername', ->
    return (scope, element) ->
        scope.getUsername = ->
            element.val()

controller:

controllers.controller 'FormController', [->
    $scope.submitForm = ->
        username = $scope.getUsername?() ? $scope.username
        # HTTP stuff...
]

Questa è l'unica soluzione che ho trovato che ha permesso a tutte le mie convalide di Angular di funzionare come previsto, inclusa la disabilitazione / abilitazione del pulsante di invio. Si installa con pergola e 1 tag script. Bazinga!

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

La modifica del valore del modello, invece di utilizzare una funzione di timeout, ha funzionato per me.

Ecco il mio codice:

module.directive('autoFill', [ function() {
    return {
        require: 'ngModel',
        link:function(scope, element, attr, ngModel) {
            var origVal = element.val();
            if(origVal){
                ngModel.$modelValue = ngModel.$modelValue || origVal;
            }
        }
    };
}]);

Soluzione a una riga nel gestore di invio (richiede jQuery):

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

Forzo un $ setValue (val ()) su submit: (funziona senza jQuery)

   var ValidSubmit = ['$parse', function ($parse) {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, element, iAttrs, controller) {
                    var form = element.controller('form');
                    form.$submitted = false;
                    var fn = $parse(iAttrs.validSubmit);
                    element.on('submit', function(event) {
                        scope.$apply(function() {
                            var inputs = element.find('input');
                            for(var i=0; i < inputs.length; i++) {
                                var ele = inputs.eq(i);
                                var field = form[inputs[i].name];
                                field.$setViewValue(ele.val());
                            }
                            element.addClass('ng-submitted');
                            form.$submitted = true;
                            if(form.$valid) {
                                fn(scope, {$event:event});
                            }
                        });
                    });
                    scope.$watch(function() { return form.$valid}, function(isValid) {
                        if(form.$submitted == false) return;
                        if(isValid) {
                            element.removeClass('has-error').addClass('has-success');
                        } else {
                            element.removeClass('has-success');
                            element.addClass('has-error');
                        }
                    });
                }
            }
        }
    }
}]
app.directive('validSubmit', ValidSubmit);

Sono molto nuovo su Angularjs, ma ho trovato una soluzione semplice a questo problema => Forza Angular a rivalutare l'espressione ... cambiandola! (ovviamente è necessario ricordare il valore iniziale per tornare allo stato iniziale) Ecco come va nella funzione controller per l'invio del modulo:

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

dove, naturalmente, il valore inserito nell'inserimento della password è stato impostato da Windows e non dall'utente.

Puoi provare questo codice:

yourapp.directive('autofill',function () {

    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var origVal = elem.val();
            if (origVal != '') {
                elem.trigger('input');
            }
        }
    }
});

Una piccola modifica a questa risposta ( https://stackoverflow.com/a/14966711/3443828 ): usa un intervallo $ invece di un timeout $ in modo da non dover gareggiare con il browser.

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

Questa è la soluzione che ho finito per usare nei miei moduli.

.directive('autofillSync', [ function(){
  var link = function(scope, element, attrs, ngFormCtrl){
    element.on('submit', function(event){
      if(ngFormCtrl.$dirty){
        console.log('returning as form is dirty');
        return;
      }   
      element.find('input').each(function(index, input){
        angular.element(input).trigger('input');
      }); 
    }); 
  };  
  return {
    /* negative priority to make this post link function run first */
    priority:-1,
    link: link,
    require: 'form'
  };  
}]);

E il modello del modulo sarà

<form autofill-sync name="user.loginForm" class="login-form" novalidate ng-submit="signIn()">
    <!-- Input fields here -->
</form>

In questo modo sono stato in grado di eseguire qualsiasi parser / formattatore che ho sul mio ng-model e avere la funzionalità di invio trasparente.

Soluzione senza direttive:

.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);
    }])

Questa è una soluzione semplice che funziona per tutti i casi che ho testato sia in Firefox che in Chrome. Nota che con la risposta in alto (direttiva con timeout) ho avuto problemi con -

• Pulsanti avanti / indietro del browser, non riattivare gli eventi di caricamento della pagina (quindi la correzione non si applica)
• Caricamento delle credenziali qualche tempo dopo il caricamento della pagina. ad es. in Firefox, fare doppio clic sulla casella di accesso e selezionare dalle credenziali memorizzate.
• È necessaria una soluzione che si aggiorni prima dell'invio del modulo poiché disabilito il pulsante Accedi fino a quando non viene fornito un input valido

Questa correzione è ovviamente molto stupida e hacky, ma funziona il 100% delle volte -

function myScope($scope, $timeout) {
    // ...
    (function autoFillFix() {
        $timeout(function() { 
            $('#username').trigger('change'); 
            $('#password').trigger('change'); 
            autoFillFix(); }, 500);                    
    })();
}

Nessuna di queste soluzioni ha funzionato per il mio caso d'uso. Ho alcuni campi modulo che utilizzano ng-change per controllare il cambiamento. L'utilizzo $watchnon è di aiuto in quanto non viene attivato dal riempimento automatico. Poiché non ho un pulsante di invio, non esiste un modo semplice per eseguire alcune delle soluzioni e non ho avuto successo utilizzando gli intervalli.

Ho finito per disabilitare il riempimento automatico, non l'ideale ma molto meno confuso per l'utente.

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

Ho trovato la risposta qui

Se stai usando jQuery puoi farlo durante l'invio del modulo:

HTML:

<form ng-submit="submit()">
    <input id="email" ng-model="password" required 
           type="text" placeholder="Your email">
    <input id="password" ng-model="password" required 
           type="password" placeholder="Password">
</form>

JS:

 $scope.submit = function() {
     $scope.password = $('#password').val();
}

Se vuoi mantenerlo semplice, ottieni il valore usando javascript

Nel tuo controller js angolare:

var nomeutente = document.getElementById ('nomeutente'). valore;