Solusi IsiOtomatis browser AngularJS dengan menggunakan arahan

Saat mengirimkan formulir di AngularJS dan menggunakan fungsi ingat kata sandi browser, dan dalam upaya login berikutnya Anda membiarkan browser mengisi formulir login dengan nama pengguna dan kata sandi, $scopemodel tidak akan diubah berdasarkan pengisian otomatis.

Satu-satunya peretasan kotor yang saya temukan adalah menggunakan petunjuk berikut:

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

Masalahnya adalah bahwa ngModel.$setViewValue(element.val());tidak mengubah model atau tampilan berdasarkan nilai yang element.val()dikembalikan. Bagaimana saya bisa melakukannya?

Tampaknya ini adalah masalah yang diketahui dengan Angular dan saat ini terbuka

Saya tidak yakin apa yang dapat Anda lakukan di sini selain semacam pekerjaan yang Anda coba. Sepertinya Anda berada di jalur yang benar. Saya tidak bisa mendapatkan browser saya untuk mencoba mengingat kata sandi untuk plunk Anda, jadi saya tidak yakin apakah ini akan berhasil tetapi lihat:

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>

Saya pikir Anda hanya perlu sedikit menyederhanakan pendekatan Anda. Satu hal yang saya rekomendasikan adalah memeriksa ngModel.$pristinedan memastikan Anda tidak menimpa beberapa masukan pengguna yang buruk. Juga, 3 detik mungkin terlalu lama. Anda tidak perlu memanggil $ apply () dalam $ timeout, BTW, itu akan mengantri $ digest untuk Anda secara otomatis.

Tangkapan sebenarnya: Akankah browser Anda mengalahkan Angular hingga eksekusi? Bagaimana dengan browser saya?

Ini mungkin perang yang tidak dapat dimenangkan, itulah sebabnya Angular (atau Knockout) belum dapat menyelesaikannya dengan mudah. Tidak ada jaminan status data dalam masukan Anda pada saat eksekusi awal direktif. Bahkan tidak pada saat Angular inisialisasi .... Jadi ini masalah yang sulit dipecahkan.

Berikut adalah solusi yang jauh lebih sedikit hacky daripada solusi lain yang disajikan dan terdengar semantik 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);
    }
  };
});

Kemudian Anda cukup melampirkan arahan ke formulir Anda:

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

Anda tidak harus menggunakan $timeoutatau semacamnya seperti ini. Anda dapat menggunakan sistem acara.

Saya pikir ini lebih Angularish dan tidak bergantung pada jQuery atau acara khusus.

Misalnya pada penangan kirim Anda:

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

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

Dan kemudian Anda dapat memiliki autofillarahan seperti ini:

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

Terakhir, HTML Anda akan menjadi seperti ini:

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

Tidak perlu meretas lagi! Angular dev tbosch membuat polyfill yang memicu peristiwa perubahan saat browser mengubah kolom formulir tanpa memicu peristiwa perubahan:

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

Untuk saat ini mereka tidak akan membangun ini menjadi kode Angular, karena ini adalah perbaikan bug untuk browser, dan juga bekerja tanpa Angular (misalnya untuk aplikasi jQuery biasa).

"Polyfill akan memeriksa perubahan pada pemuatan dokumen dan juga saat masukan tersisa (hanya dalam bentuk yang sama). Namun, Anda dapat memicu pemeriksaan secara manual jika Anda mau.

Proyek ini memiliki pengujian unit serta pengujian semi otomatis, jadi kami akhirnya memiliki tempat untuk mengumpulkan semua kasus penggunaan yang berbeda bersama dengan setelan browser yang diperlukan.

Harap diperhatikan: Polyfill ini bekerja dengan aplikasi AngularJS biasa, dengan aplikasi AngularJS / jQuery tetapi juga dengan aplikasi jQuery biasa yang tidak menggunakan Angular. "

Itu dapat diinstal dengan:

bower install autofill-event --save

Tambahkan skrip autofill-event.js setelah jQuery atau Angular di halaman Anda.

Ini akan melakukan hal berikut:

• setelah DOMContentLoaded: periksa semua bidang masukan
• satu bidang tersisa: centang semua bidang lain dalam formulir yang sama

API (untuk memicu pemeriksaan secara manual):

• $el.checkAndTriggerAutoFillEvent(): Jalankan pemeriksaan untuk semua elemen DOM dalam elemen jQuery / jQLite yang diberikan.

Bagaimana itu bekerja

1. Ingat semua perubahan pada elemen input oleh pengguna (mendengarkan peristiwa perubahan) dan juga oleh JavaScript (dengan mencegat $ el.val () untuk elemen jQuery / jQLite). Nilai yang diubah itu disimpan pada elemen di properti pribadi.

2. Memeriksa elemen untuk pengisian otomatis: Bandingkan nilai elemen saat ini dengan nilai yang diingat. Jika berbeda, picu peristiwa perubahan.

Dependensi

AngularJS atau jQuery (bekerja dengan salah satu atau keduanya)

Info dan sumber lebih lanjut di halaman github .

Original Angular Issue # 1460 di Github dapat dibaca disini.

Kode kotor, periksa apakah masalah https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 sudah diperbaiki sebelum menggunakan kode ini. Direktif ini memicu peristiwa ketika bidang diisi, tidak hanya sebelum pengiriman (ini diperlukan jika Anda harus menangani masukan sebelum mengirimkan)

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

Sepertinya solusi lurus ke depan yang jelas. Tidak perlu jQuery.

MEMPERBARUI:

• Model diperbarui hanya jika nilai model tidak sama dengan nilai input sebenarnya.
• Pemeriksaan tidak berhenti pada IsiOtomatis pertama. Dalam kasus jika Anda ingin menggunakan akun lain misalnya.

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

Solusi 1 [Menggunakan $ timeout]:

Pengarahan:

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>

Solusi 2 [Menggunakan kejadian bersudut]:

Ref: Jawaban Becko

Pengarahan:

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>

Solusi 3 [Menggunakan panggilan metode relai]:

Pengarahan:

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>

Nah, cara termudah itu untuk meniru perilaku browser, jadi jika ada masalah dengan event perubahan, aktifkan saja sendiri. Jauh lebih sederhana.

Pengarahan:

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>

Anda dapat melakukan beberapa variasi, seperti meletakkan direktif pada formulir dan mengaktifkan peristiwa pada semua input dengan kelas .dirty pada pengiriman formulir.

Ini adalah cara jQuery:

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

Ini adalah cara Angular:

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

Berikut solusi lain yang tidak terlalu meretas, tetapi memerlukan beberapa kode tambahan di pengontrol.

HTML:

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

Petunjuk (CoffeeScript):

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

Pengontrol:

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

Ini adalah satu-satunya solusi yang saya temukan yang memungkinkan semua validasi Angular saya berfungsi seperti yang dirancang termasuk nonaktifkan / aktifkan tombol kirim. Instal dengan bower dan 1 tag skrip. Bazinga!

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

Mengubah nilai model, daripada menggunakan fungsi batas waktu berhasil untuk saya.

Ini kode saya:

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

Solusi satu baris di penangan kirim (memerlukan jQuery):

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

Saya memaksa $ setValue (val ()) saat mengirimkan: (ini berfungsi tanpa 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);

Saya sangat baru mengenal Angularjs, tetapi saya menemukan solusi sederhana untuk masalah itu => Paksa Angular untuk mengevaluasi ulang ekspresi ... dengan mengubahnya! (tentu saja Anda perlu mengingat nilai awal untuk kembali ke keadaan awal) Berikut ini caranya dalam fungsi pengontrol Anda untuk mengirimkan formulir:

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

di mana tentu saja, nilai yang dimasukkan dalam input kata sandi Anda telah diatur oleh windows dan bukan oleh pengguna.

Anda dapat mencoba kode ini:

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

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

Modifikasi kecil untuk jawaban ini ( https://stackoverflow.com/a/14966711/3443828 ): gunakan $ interval alih-alih $ batas waktu sehingga Anda tidak perlu balapan 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
    }
  });

Ini adalah solusi yang akhirnya saya gunakan dalam formulir saya.

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

Dan Templat formulirnya adalah

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

Dengan cara ini saya dapat menjalankan parser / pemformatan apa pun yang saya miliki di model-ng saya dan memiliki fungsionalitas kirim transparan.

Solusi tanpa arahan:

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

Ini adalah perbaikan sederhana yang berfungsi untuk semua kasus yang telah saya uji di Firefox dan Chrome. Perhatikan bahwa dengan jawaban teratas (direktif w / timeout) saya memiliki masalah dengan -

• Tombol mundur / maju browser, jangan aktifkan kembali peristiwa pemuatan halaman (jadi perbaikan tidak berlaku)
• Memuat kredensial beberapa saat setelah halaman dimuat. misalnya di Firefox, klik dua kali pada kotak login dan pilih dari kredensial yang disimpan.
• Butuh solusi yang memperbarui sebelum pengiriman formulir karena saya menonaktifkan tombol Login sampai masukan yang valid diberikan

Perbaikan ini jelas sangat bodoh dan hacky, tetapi selalu berhasil 100% -

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

Tak satu pun dari solusi ini berfungsi untuk kasus penggunaan saya. Saya memiliki beberapa kolom formulir yang menggunakan ng-change untuk melihat perubahan. Menggunakan$watch tidak membantu karena tidak dipicu oleh IsiOtomatis. Karena saya tidak memiliki tombol kirim, tidak ada cara mudah untuk menjalankan beberapa solusi dan saya tidak berhasil menggunakan interval.

Saya akhirnya menonaktifkan IsiOtomatis - tidak ideal tetapi jauh lebih tidak membingungkan pengguna.

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

Temukan jawabannya di sini

Jika Anda menggunakan jQuery, Anda dapat melakukan ini pada pengiriman formulir:

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

Jika Anda ingin membuatnya tetap sederhana, dapatkan nilainya menggunakan javascript

Di pengontrol js sudut Anda:

var namapengguna = document.getElementById ('namapengguna'). nilai;