Giải pháp tự động điền trình duyệt AngularJS bằng cách sử dụng chỉ thị

Khi gửi biểu mẫu trong AngularJS và sử dụng chức năng ghi nhớ mật khẩu của trình duyệt, và trong lần đăng nhập tiếp theo, bạn để trình duyệt điền vào biểu mẫu đăng nhập bằng tên người dùng và mật khẩu, $scopemô hình sẽ không bị thay đổi dựa trên tự động điền.

Cách hack bẩn duy nhất mà tôi tìm thấy là sử dụng lệnh sau:

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

Vấn đề là ngModel.$setViewValue(element.val()); không thay đổi mô hình cũng như chế độ xem dựa trên element.val()giá trị trả về. Làm thế nào tôi có thể thực hiện điều đó?

Rõ ràng đây là một vấn đề đã biết với Angular và hiện đang mở

Tôi không chắc bạn có thể làm gì ở đây ngoài một số công việc xung quanh như bạn đang cố gắng. Có vẻ như bạn đang đi đúng hướng. Tôi không thể khiến trình duyệt của mình cố gắng nhớ mật khẩu cho plunk của bạn, vì vậy tôi không chắc liệu điều này có hoạt động hay không nhưng hãy xem:

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>

Tôi nghĩ bạn chỉ cần đơn giản hóa cách tiếp cận của mình một chút. Một điều tôi chắc chắn khuyên bạn nên kiểm trangModel.$pristine và đảm bảo rằng bạn không ghi đè dữ liệu nhập của một số người dùng kém. Ngoài ra, 3 giây có lẽ là quá dài. Bạn không cần phải gọi $ apply () trong thời gian chờ $, BTW, nó sẽ tự động xếp hàng một thông báo $ cho bạn.

Bí quyết thực sự: Liệu trình duyệt của bạn có đánh bại Angular để thực thi không? Còn về trình duyệt của tôi?

Đây có lẽ là một cuộc chiến bất khả kháng, đó là lý do tại sao Angular (hoặc Knockout) không thể giải quyết nó một cách dễ dàng. Không có gì đảm bảo về trạng thái của dữ liệu trong đầu vào của bạn tại thời điểm thực thi ban đầu của chỉ thị. Ngay cả tại thời điểm khởi tạo Angular .... Vì vậy, đó là một vấn đề khó giải quyết.

Đây là một giải pháp ít hack hơn nhiều so với các giải pháp khác được trình bày và có ngữ nghĩa 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);
    }
  };
});

Sau đó, bạn chỉ cần đính kèm chỉ thị vào biểu mẫu của mình:

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

Bạn không cần phải sử dụng một $timeouthoặc bất cứ thứ gì tương tự. Bạn có thể sử dụng một hệ thống sự kiện.

Tôi nghĩ rằng nó có nhiều góc cạnh hơn và không phụ thuộc vào jQuery hoặc bắt sự kiện tùy chỉnh.

Ví dụ trên trình xử lý gửi của bạn:

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

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

Và sau đó bạn có thể có một autofillchỉ thị như sau:

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

Cuối cùng, HTML của bạn sẽ giống như sau:

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

Không cần phải hack nữa! Angular dev tbosch đã tạo một polyfill kích hoạt sự kiện thay đổi khi trình duyệt thay đổi các trường biểu mẫu mà không kích hoạt sự kiện thay đổi:

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

Hiện tại, họ sẽ không xây dựng điều này vào mã Angular, vì đây là một bản sửa lỗi cho trình duyệt và cũng hoạt động mà không có Angular (ví dụ: đối với các ứng dụng jQuery thuần túy).

"Polyfill sẽ kiểm tra các thay đổi khi tải tài liệu và cả khi còn lại một đầu vào (chỉ ở cùng một biểu mẫu). Tuy nhiên, bạn có thể kích hoạt kiểm tra theo cách thủ công nếu muốn.

Dự án có các bài kiểm tra đơn vị cũng như các bài kiểm tra bán tự động, vì vậy cuối cùng chúng tôi đã có một nơi để thu thập tất cả các trường hợp sử dụng khác nhau cùng với các cài đặt trình duyệt được yêu cầu.

Xin lưu ý: Polyfill này hoạt động với các ứng dụng AngularJS thuần túy, với các ứng dụng AngularJS / jQuery nhưng cũng với các ứng dụng jQuery thuần túy không sử dụng Angular. "

Nó có thể được cài đặt với:

bower install autofill-event --save

Thêm tập lệnh autofill-event.js sau jQuery hoặc Angular vào trang của bạn.

Điều này sẽ làm như sau:

• sau DOMContentLoaded: kiểm tra tất cả các trường đầu vào
• một trường còn lại: kiểm tra tất cả các trường khác trong cùng một biểu mẫu

API (để kích hoạt kiểm tra theo cách thủ công):

• $el.checkAndTriggerAutoFillEvent(): Thực hiện kiểm tra tất cả các phần tử DOM trong phần tử jQuery / jQLite đã cho.

Làm thế nào nó hoạt động

1. Ghi nhớ tất cả các thay đổi đối với các phần tử đầu vào bởi người dùng (lắng nghe các sự kiện thay đổi) và cả JavaScript (bằng cách chặn $ el.val () cho các phần tử jQuery / jQLite). Giá trị đã thay đổi đó được lưu trữ trên phần tử trong thuộc tính riêng.

2. Kiểm tra một phần tử để tự động điền: So sánh giá trị hiện tại của phần tử với giá trị đã nhớ. Nếu nó khác, hãy kích hoạt một sự kiện thay đổi.

Sự phụ thuộc

AngularJS hoặc jQuery (hoạt động với một hoặc cả hai)

Thêm thông tin và nguồn trên trang github .

Bạn có thể đọc bản gốc Angular Issue # 1460 trên Github tại đây.

Mã bẩn, hãy kiểm tra xem sự cố https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 đã được khắc phục chưa trước khi sử dụng mã này. Chỉ thị này kích hoạt các sự kiện khi trường được điền, không chỉ trước khi gửi (nó cần thiết nếu bạn phải xử lý đầu vào trước khi gửi)

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

Có vẻ như giải pháp rõ ràng về phía trước. Không cần jQuery.

CẬP NHẬT:

• Mô hình chỉ được cập nhật khi giá trị mô hình không bằng giá trị đầu vào thực tế.
• Việc kiểm tra không dừng lại ở lần tự động điền đầu tiên. Trong trường hợp nếu bạn muốn sử dụng một tài khoản khác chẳng hạn.

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

Giải pháp 1 [Sử dụng $ timeout]:

Chỉ thị:

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>

Giải pháp 2 [Sử dụng các sự kiện góc]:

Tham khảo: Câu trả lời của Becko

Chỉ thị:

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>

Giải pháp 3 [Sử dụng lệnh gọi phương thức chuyển tiếp]:

Chỉ thị:

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>

Chà, cách dễ nhất là mô phỏng hành vi của trình duyệt, vì vậy nếu có vấn đề với sự kiện thay đổi, chỉ cần tự khắc phục sự cố. Đơn giản hơn nhiều.

Chỉ thị:

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>

Bạn có thể thực hiện một số biến thể, chẳng hạn như đặt chỉ thị trên biểu mẫu và kích hoạt sự kiện trên tất cả các đầu vào với lớp .dirty khi gửi biểu mẫu.

Đây là cách jQuery:

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

Đây là cách 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 /> 

Đây là một giải pháp khác ít hack hơn, nhưng yêu cầu một số mã bổ sung trong bộ điều khiển.

HTML:

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

Chỉ thị (CoffeeScript):

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

Bộ điều khiển:

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

Đây là giải pháp duy nhất mà tôi đã tìm thấy cho phép tất cả các xác thực Angular 'của tôi hoạt động như được thiết kế bao gồm vô hiệu hóa / kích hoạt nút gửi. Cài đặt với bower và 1 thẻ script. Bazinga!

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

Tôi thay đổi giá trị mô hình, thay vì sử dụng một hàm thời gian chờ.

Đây là mã của tôi:

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

Cách giải quyết một lớp trong trình xử lý gửi (yêu cầu jQuery):

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

Tôi buộc gửi một $ setValue (val ()): (điều này hoạt động mà không cần 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);

Tôi rất mới với Angularjs, nhưng tôi đã tìm thấy một giải pháp đơn giản cho vấn đề đó => Buộc Angular đánh giá lại biểu thức ... bằng cách thay đổi nó! (tất nhiên bạn cần nhớ giá trị ban đầu để hoàn nguyên về trạng thái ban đầu) Đây là cách nó hoạt động trong hàm bộ điều khiển của bạn để gửi biểu mẫu:

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

tất nhiên, giá trị được nhập trong phần nhập mật khẩu của bạn đã được đặt bởi các cửa sổ chứ không phải bởi người dùng.

Bạn có thể thử mã này:

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

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

Một sửa đổi nhỏ cho câu trả lời này ( https://stackoverflow.com/a/14966711/3443828 ): sử dụng khoảng thời gian $ thay vì $ timeout để bạn không phải chạy trình duyệt.

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

Đây là giải pháp tôi đã sử dụng trong các biểu mẫu của mình.

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

Và mẫu của biểu mẫu sẽ là

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

Bằng cách này, tôi có thể chạy bất kỳ trình phân tích cú pháp / định dạng nào mà tôi có trên ng-model của mình và có chức năng gửi trong suốt.

Giải pháp không có chỉ thị:

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

Đây là một bản sửa lỗi đơn giản phù hợp với tất cả các trường hợp tôi đã thử nghiệm trên cả Firefox và Chrome. Lưu ý rằng với câu trả lời hàng đầu (chỉ thị w / timeout), tôi đã gặp vấn đề với -

• Nút quay lại / chuyển tiếp của trình duyệt, không kích hoạt lại các sự kiện tải trang (vì vậy bản sửa lỗi không áp dụng)
• Đang tải thông tin đăng nhập một thời gian sau khi tải trang. Ví dụ: trong Firefox, nhấp đúp vào hộp đăng nhập và chọn từ thông tin đăng nhập đã lưu trữ.
• Cần một giải pháp cập nhật trước khi gửi biểu mẫu vì tôi tắt nút Đăng nhập cho đến khi cung cấp đầu vào hợp lệ

Bản sửa lỗi này rõ ràng là rất ngu ngốc và khó hiểu, nhưng nó hoạt động 100% thời gian -

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

Không có giải pháp nào trong số này phù hợp với trường hợp sử dụng của tôi. Tôi có một số trường biểu mẫu sử dụng ng-change để theo dõi sự thay đổi. Việc sử dụng $watchkhông có ích gì vì nó không được kích hoạt bởi tính năng tự động điền. Vì tôi không có nút gửi nên không có cách nào dễ dàng để chạy một số giải pháp và tôi đã không thành công khi sử dụng các khoảng thời gian.

Tôi đã tắt tính năng tự động điền - không lý tưởng nhưng ít gây nhầm lẫn hơn cho người dùng.

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

Tìm thấy câu trả lời ở đây

Nếu bạn đang sử dụng jQuery, bạn có thể thực hiện việc này khi gửi biểu mẫu:

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

Nếu bạn muốn đơn giản, chỉ cần lấy giá trị bằng javascript

Trong bộ điều khiển js góc cạnh của bạn:

var username = document.getElementById ('tên người dùng'). value;