Solusi IsiOtomatis browser AngularJS dengan menggunakan arahan


111

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?


Kode ini terlihat oke pada blush pertama ... tapi dimana sisanya (markup, dll)? Apakah Anda memiliki biola atau tongkat yang bisa kami lihat?
Ben Lesh

Berikut plunknya : plnkr.co/edit/CHrBAVU9Ycl2ex2DRr6R Saya tidak yakin apakah ini bekerja langsung pada plunker karena berjalan dalam iframe.
lucassp

1
Anda tidak perlu melakukan scope. $ Apply di dalam angular's $ timeout. Anda mungkin membutuhkannya di dalam native window.setTimeout. Tapi itu ide yang lebih baik untuk menggunakan sudut.
gorpacrate

1
Ada perbaikan polyfill "resmi" dari Angular dev tbosch untuk masalah ini. Silakan lihat detailnya di answer stackoverflow.com/a/25687396/3009639 di bawah ini.
orszaczky

Sayangnya perbaikan "resmi" adalah meninggalkan perangkat lunak dan tidak berfungsi di banyak browser. Masalah telah diajukan tetapi tidak ditangani sehingga pencarian berlanjut ...
cyberwombat

Jawaban:


45

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.


1
Poin bagus tentang $ murni. Nah, 3 detik ada di sana hanya untuk tujuan pengujian. Dialog "Simpan Kata Sandi" sepertinya berfungsi di Safari. Itu masalah lain yang harus saya selidiki.
lucassp

Hanya membodohi dia dengan penyimpanan lokal. :) ... Saya akan terus memikirkannya. Tapi saya ragu tentang kelayakan membuat IsiOtomatis berfungsi dengan binding dua arah apa pun.
Ben Lesh

Ya, tetapi saya masih harus dapat memperbarui model dari arahan agar dapat berfungsi.
lucassp

1
Saya bercanda tentang localStorage, Anda tidak ingin menyimpan kata sandi di sana.
Ben Lesh

1
Ini tidak akan berfungsi dengan Safari dan pengisian otomatis kartu kredit, karena pengisian otomatis ini dipicu kapan saja oleh pengguna
Dallas Clark

35

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>

2
Yang ini berhasil. Kami mencoba sebagian besar cara di atas tanpa hasil apa pun. Terima kasih!!! Hasilnya ada di mobbr.com
Patrick Savalle

1
Karena ini menggunakan jQuery, ini tidak diharapkan berfungsi tanpa jQuery.
Quinn Strahl

1
Ini dia di tahun 2018 dan ini masih perbaikannya. Terima kasih Yehezkiel!
Scott Manny

35

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

14
Dalam kasus saya, tombol kirim dinonaktifkan saat input kosong.
gorpacrate

4
tidakkah Anda pernah mengalami masalah dengan ini karena ini asinkron? di mana panggilan masuk ke server sudah keluar sebelum acara direplikasi dan direktif punya waktu untuk memperbarui cakupan?
Sander

12

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.


2
Ini tidak berhasil untuk kasus saya. checkAndTriggerAutoFillEvent () dipicu dan menghasilkan kejadian, tetapi AngularJS tidak pernah memperbarui modelnya dan menganggap bahwa bidang kosong.
Splaktar

Saya tidak mengalami masalah dalam menggunakan polyill ini. Jika Anda tidak dapat membuatnya berfungsi dengan baik, Anda harus membuat pertanyaan terpisah termasuk beberapa kode. Jika Anda menemukan bug, Anda harus memeriksa tiket di github, atau membuka yang baru.
orszaczky

Ya, saya pikir itu terkait dengan bug ini: github.com/tbosch/autofill-event/issues/11
Splaktar

1
ngModelOptionsdigabungkan dengan autofill-eventsarana sekarang Anda dapat menentukan changesebagai salah satu updateOnperistiwa untuk memastikan model Anda disinkronkan dengan benar.
morloch

10

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

5

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

4
+1 solusi yang bagus, mirip dengan yang saya dapatkan. Satu-satunya tambahan yang saya sarankan adalah terlebih dahulu memeriksa apakah modelnya $pristinesebelum mengubahnya, dan kemudian setelah mengubahnya, pertahankan $pristinestatusnya. Jika tidak, Anda akan menemukan bahwa jika formulir dimuat tanpa data IsiOtomatis, perintah di atas akan tetap memperbarui model dan selanjutnya membuatnya dirtymeskipun kontrol formulir masih dianggap tidak tersentuh. contoh di sini, menggunakan direktif Anda. Saya telah mengomentari kode yang akan saya tambahkan: jsfiddle.net/OACDesigns/L8Sja/4
OACDesigns

1
juga, saya pikir scope:trueharusscope:{}
OACDesigns

4

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>

2
Solusi 1 bekerja sangat baik untuk sementara waktu, tetapi sekarang di angularjs 1.4.9 tidak berfungsi lagi. Memeriksa model.$validdirektif mengembalikan nilai true baik sebelum dan sesudah $setViewValue, tetapi elemen masih dengan ng-invalidkelas
John

4

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.


3

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

2
Cara yang sepenuhnya non-sudut.
gorpacrate

1
@gorpacrate: Sekarang periksa dengan cara sudut.
Nishchit Dhanani

2
Tab Angular Way memiliki terlalu banyak spasi. Hanya bercanda. Saya suka scrolling horizontal.
Daniel Birowsky Popeski

ini tidak bekerja dalam sudut karena tidak ada pemicu fungsi pada elemen. Saya pikir ini perlu memasukkan jquery
Tomas

1
triggerHandler('input')seharusnya baik-baik saja jika Anda tidak memiliki jquery yang lengkap
Mutmatt

1

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

Anda memiliki ini di vanilla JavaScript?
f1lt3r

CoffeeScript.org menyediakan penerjemah: dilakukan di sini
jab

1

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


1
pengisian poli ini tidak sesuai dengan tombol kirim / masukan yang mengikat ke status formulir. kecuali jika Anda mengklik halaman pada titik mana pun Anda ingin memicu intisari (tampaknya tindakan tersebut memicu browser untuk melakukan pengisian nyata), maka tombol tersebut menjadi aktif. Halaman uji dengan tes manual
e-cloud

1

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

1

Solusi satu baris di penangan kirim (memerlukan jQuery):

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

Ini tidak benar-benar satu kalimat jika itu dalam arahan, yang memang seharusnya begitu.
isherwood

0

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

0

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.


0

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

0

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

0

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.


0

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

0

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

1
dapat mengganti $timeoutdengan $intervalmemberikan konteks yang lebih banyak kepada pengembang masa depan dan menyingkirkan panggilan rekursif yang tampak aneh yang terjadi di sana
Mutmatt

0

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


-1

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

1
Meskipun ini mungkin berhasil, itu tidak masuk akal untuk bentuk yang lebih kompleks.
origin1tech

-1

Jika Anda ingin membuatnya tetap sederhana, dapatkan nilainya menggunakan javascript

Di pengontrol js sudut Anda:

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


Saya pikir Anda tidak mengerti apa masalahnya
aelor
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.