Bir yönerge kullanarak AngularJS tarayıcısı otomatik doldurma geçici çözümü

AngularJS'de bir form gönderirken ve tarayıcıyı kullanırken parola işlevini hatırlayın ve sonraki bir oturum açma girişiminde, tarayıcının oturum açma formunu kullanıcı adı ve parolayla doldurmasına izin verirsiniz, $scope model otomatik doldurmaya bağlı olarak değiştirilmez.

Bulduğum tek kirli hack, aşağıdaki yönergeyi kullanmaktır:

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

Sorun, döndürülen değere ngModel.$setViewValue(element.val());göre modeli veya görünümü değiştirmemesidir element.val(). Bunu nasıl başarabilirim?

Görünüşe göre bu Angular ile bilinen bir sorundur ve şu anda açık

Yapmaya çalıştığın gibi bir tür iş dışında burada ne yapabilirsin bilmiyorum. Görünüşe göre doğru yoldasın. Tarayıcımın sizin şifreniz için bir şifre hatırlamaya çalışmasını sağlayamadım, bu yüzden bunun işe yarayıp yaramayacağından emin değilim ama bir göz atın:

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>

Sadece yaklaşımınızı biraz basitleştirmeniz gerektiğini düşünüyorum. Kesinlikle tavsiye ettiğim tek şey, ngModel.$pristinebazı zayıf kullanıcıların girişlerinin üzerine yazmadığınızdan emin olmaktır. Ayrıca 3 saniye muhtemelen çok uzun. $ Timeout, BTW içinde $ apply () çağırmanız gerekmemeli, sizin için otomatik olarak bir $ özetini kuyruğa almalıdır.

Gerçek yakalama: Tarayıcınız Angular'ı yürütmeye yenecek mi? Tarayıcım ne olacak?

Bu muhtemelen kazanılamaz bir savaş, bu yüzden Angular (veya Nakavt) onu hemen çözemedi. Yönergenin ilk uygulaması sırasında girişinizdeki verilerin durumunun garantisi yoktur. Angular'ın başlatıldığı sırada bile değil .... Bu yüzden çözülmesi zor bir problem.

Sunulan diğer çözümlerden çok daha az kesikli ve anlamsal olarak sağlam bir çözümdür 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);
    }
  };
});

Ardından direktifi formunuza eklemeniz yeterlidir:

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

Bunun $timeoutgibi bir şey kullanmak zorunda değilsin . Bir olay sistemi kullanabilirsiniz.

Bence daha Angularish ve jQuery veya özel olay yakalamaya bağlı değil.

Örneğin, gönderme işleyicinizde:

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

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

Ve sonra şöyle bir autofilldirektifiniz olabilir :

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

Son olarak, HTML'niz şöyle olacaktır:

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

Artık hacklemeye gerek yok! Açısal geliştirici tbosch , tarayıcı bir değişiklik olayını tetiklemeden form alanlarını değiştirdiğinde bir değişiklik olayını tetikleyen bir yaptı:

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

Şimdilik bunu Angular koduna eklemeyecekler, çünkü bu tarayıcı için bir hata düzeltmesi ve aynı zamanda Angular olmadan da çalışıyor (örn. Düz jQuery uygulamaları için).

"Çoklu doldurma, belge yüklemesindeki değişiklikleri ve ayrıca bir girdi kaldığında (yalnızca aynı biçimde) kontrol edecektir. Ancak, isterseniz kontrolü manuel olarak tetikleyebilirsiniz.

Projede yarı otomatik testlerin yanı sıra birim testleri de var, bu nedenle nihayet tüm farklı kullanım durumlarını gerekli tarayıcı ayarlarıyla birlikte toplayabileceğimiz bir yerimiz var.

Lütfen dikkat: Bu çoklu dolgu, düz AngularJS uygulamalarıyla, AngularJS / jQuery uygulamalarıyla ve ayrıca Angular kullanmayan düz jQuery uygulamalarıyla da çalışır. "

Şunlarla kurulabilir:

bower install autofill-event --save

Komut dosyasını ekleyin autofill-event.js sonra sayfanıza jQuery veya köşeli.

Bu, aşağıdakileri yapacaktır:

• DOMContentLoaded'dan sonra: tüm giriş alanlarını kontrol edin
• bir alan kaldı: aynı formdaki diğer tüm alanları kontrol edin

API (kontrolü manuel olarak tetiklemek için):

• $el.checkAndTriggerAutoFillEvent(): Verilen jQuery / jQLite öğesindeki tüm DOM öğelerinin kontrolünü yürütün.

Nasıl çalışır

1. Kullanıcı (değişiklik olaylarını dinleyerek) ve ayrıca JavaScript (jQuery / jQLite öğeleri için $ el.val () işlevini keserek) tarafından giriş öğelerindeki tüm değişiklikleri hatırlayın. Bu değişen değer, özel bir mülkteki öğede saklanır.

2. Otomatik doldurma için bir öğeyi kontrol etme: Öğenin mevcut değerini hatırlanan değerle karşılaştırın. Farklıysa, bir değişiklik olayı tetikleyin.

Bağımlılıklar

AngularJS veya jQuery (biri veya her ikisi ile çalışır)

Github sayfasında daha fazla bilgi ve kaynak .

Github'daki Original Angular Issue # 1460 buradan okunabilir.

Kirli kod, bu kodu kullanmadan önce https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 sorunun düzeltilip düzeltilmediğini kontrol edin . Bu yönerge, yalnızca göndermeden önce değil, alan doldurulduğunda olayları tetikler (girdiyi göndermeden önce işlemeniz gerekiyorsa gereklidir)

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

Açık bir çözüm gibi görünüyor. JQuery gerekmez.

GÜNCELLEME:

• Model yalnızca model değeri gerçek girdi değerine eşit olmadığında güncellenir.
• İlk otomatik doldurmada kontrol etme durmaz. Örneğin başka bir hesap kullanmak istemeniz durumunda.

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

1. Çözüm [$ zaman aşımını kullanma]:

Direktif:

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>

2. Çözüm [Açısal olayları kullanma]:

Ref: Becko'nun cevabı

Direktif:

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>

3. Çözüm [Geçiş yöntemi çağrılarını kullanma]:

Direktif:

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>

Pekala, en kolay yol tarayıcının davranışını taklit etmenin yolu, bu nedenle, değişiklik olayıyla ilgili bir sorun varsa, onu kendin çalıştır. Çok daha basit.

Direktif:

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>

Yönergeyi forma koymak ve olayı tüm girdilerde .dirty sınıfı form gönderimi ile tetiklemek gibi bazı varyasyonlar yapabilirsiniz.

Bu jQuery yöntemidir:

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

Bu, Açısal yoldur:

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

İşte daha az karmaşık olan, ancak denetleyicide fazladan kod gerektiren başka bir çözüm.

HTML:

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

Direktif (CoffeeScript):

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

Denetleyici:

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

Gönder düğmesini devre dışı bırak / etkinleştir dahil olmak üzere tüm Angular 'doğrulamalarımın tasarlandığı gibi çalışmasına izin veren bulduğum tek çözüm budur. Bower ve 1 script etiketi ile kurulur. Bazinga!

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

Bir zaman aşımı işlevi kullanmak yerine model değerini değiştirmek benim için çalıştı.

İşte kodum:

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

Gönderme işleyicisindeki tek satırlık geçici çözüm (jQuery gerektirir):

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

Göndermeye bir $ setValue (val ()) zorlarım: (bu jQuery olmadan çalışır )

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

Angularjs'de çok yeniyim, ancak bu soruna basit bir çözüm buldum => İfadeyi yeniden değerlendirmek için Angular'ı zorla ... değiştirerek! (tabii ki başlangıç ​​durumuna geri dönmek için başlangıç ​​değerini hatırlamanız gerekir) İşte formu göndermek için denetleyici işlevinize girme şekli:

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

elbette, şifre girişinize girilen değer, kullanıcı tarafından değil, Windows tarafından ayarlanmıştır.

Bu kodu deneyebilirsiniz:

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

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

Bu yanıtta küçük bir değişiklik ( https://stackoverflow.com/a/14966711/3443828 ): tarayıcıda yarışmak zorunda kalmamak için $ zaman aşımı yerine bir $ aralığı kullanın.

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

Formlarımda kullandığım çözüm bu.

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

Ve formun şablonu

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

Bu şekilde, ng modelimde sahip olduğum ayrıştırıcıları / biçimlendiricileri çalıştırabildim ve gönderme işlevini şeffaf hale getirebildim.

Direktifsiz çözüm:

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

Bu, hem Firefox hem de Chrome'da test ettiğim tüm durumlar için çalışan basit bir düzeltmedir. En iyi yanıtla (zaman aşımıyla yönerge) sorun yaşadığımı unutmayın -

• Tarayıcı geri / ileri düğmeleri, sayfa yükleme olaylarını yeniden tetikleme (bu nedenle düzeltme geçerli olmaz)
• Kimlik bilgileri, sayfa yüklendikten bir süre sonra yükleniyor. örn. Firefox'ta, oturum açma kutusuna çift tıklayın ve kayıtlı kimlik bilgilerinden seçim yapın.
• Geçerli giriş sağlanana kadar Oturum Aç düğmesini devre dışı bıraktığım için form gönderilmeden önce güncellenen bir çözüme ihtiyacım var

Bu düzeltme açıkça çok aptalca ve hilekar, ancak her zaman işe yarıyor -

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

Bu çözümlerden hiçbiri benim kullanım durumum için işe yaramadı. Değişikliği izlemek için ng-change kullanan bazı form alanlarım var. Otomatik $watchdoldurma tarafından tetiklenmediğinden kullanımı yardımcı olmaz. Gönder düğmem olmadığından bazı çözümleri çalıştırmanın kolay bir yolu yok ve aralıkları kullanarak başarılı olamadım.

Otomatik doldurmayı devre dışı bıraktım - ideal değil ama kullanıcı için çok daha az kafa karıştırıcı.

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

Cevabı burada buldum

JQuery kullanıyorsanız, bunu form gönderimi sırasında yapabilirsiniz:

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

Basit tutmak istiyorsanız, javascript kullanarak değeri elde edin

Açısal js denetleyicinizde:

var username = document.getElementById ('kullanıcı adı'). değer;