지시문을 사용하여 AngularJS 브라우저 자동 채우기 해결 방법

AngularJS에서 양식을 제출하고 브라우저 암호 기억 기능을 사용할 때, 후속 로그인 시도에서 브라우저가 사용자 이름과 암호로 로그인 양식을 채우도록하면 $scope모델이 자동 채우기를 기반으로 변경되지 않습니다.

내가 찾은 유일한 더러운 해킹은 다음 지시문을 사용하는 것입니다.

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

문제는 반환 된 값 ngModel.$setViewValue(element.val());에 따라 모델이나 뷰를 변경하지 않는다는 것 element.val()입니다. 어떻게 할 수 있습니까?

분명히 이것은 Angular의 알려진 문제이며 현재 열려 있습니다.

나는 당신이 시도하는 것과 같은 일종의 일 외에 여기서 당신이 무엇을 할 수 있는지 잘 모르겠습니다. 올바른 길을 가고있는 것 같습니다. 내 브라우저가 귀하의 플렁크에 대한 암호를 기억하도록 할 수 없었기 때문에 이것이 작동하는지 확실하지 않지만 살펴 보았습니다.

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>

접근 방식을 약간 단순화해야한다고 생각합니다. 내가 확실히 추천하는 한 가지는 ngModel.$pristine불량한 사용자의 입력을 덮어 쓰지 않는지 확인 하고 확인하는 것입니다. 또한 3 초는 아마도 너무 깁니다. $ timeout, BTW에서 $ apply ()를 호출 할 필요는 없습니다. 자동으로 $ digest를 큐에 넣어야합니다.

진짜 캐치 : 브라우저가 Angular를 능가할까요? 내 브라우저는 어떻습니까?

이것은 아마도 승리 할 수없는 전쟁 일 것입니다. 이것이 Angular (또는 Knockout)가 쉽게 해결할 수 없었던 이유입니다. 지시문이 처음 실행될 때 입력 데이터의 상태를 보장 할 수 없습니다. Angular의 초기화 시점에도 .... 그래서 해결하기 까다로운 문제입니다.

다음은 제시된 다른 솔루션보다 훨씬 덜 해킹적이고 의미 론적으로 건전한 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);
    }
  };
});

그런 다음 양식에 지시문을 첨부하기 만하면됩니다.

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

a $timeout또는 이와 비슷한 것을 사용할 필요가 없습니다 . 이벤트 시스템을 사용할 수 있습니다.

나는 그것이 더 Angularish라고 생각하며 jQuery 또는 사용자 정의 이벤트 포착에 의존하지 않습니다.

예를 들어 제출 핸들러에서 :

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

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

그리고 다음 autofill과 같은 지시문을 가질 수 있습니다 .

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

마지막으로 HTML은 다음과 같습니다.

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

더 이상 해킹 할 필요가 없습니다! Angular dev tbosch 는 브라우저가 변경 이벤트를 트리거하지 않고 양식 필드를 변경할 때 변경 이벤트를 트리거하는 폴리 필을 만들었습니다.

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

현재로서는 브라우저의 버그 수정이므로 Angular 코드에 빌드하지 않을 것이며 Angular 없이도 작동합니다 (예 : 일반 jQuery 앱의 경우).

"폴리 필은 문서로드시 변경 사항과 입력이 남아있을 때도 확인합니다 (동일한 양식에서만).하지만 원하는 경우 수동으로 확인을 트리거 할 수 있습니다.

이 프로젝트에는 단위 테스트와 반자동 테스트가 있으므로 마침내 필요한 브라우저 설정과 함께 모든 다른 사용 사례를 수집 할 수있는 장소가 생겼습니다.

참고 :이 폴리 필은 일반 AngularJS 앱, AngularJS / jQuery 앱뿐만 아니라 Angular를 사용하지 않는 일반 jQuery 앱에서도 작동합니다. "

다음과 함께 설치할 수 있습니다.

bower install autofill-event --save

페이지에서 jQuery 또는 Angular autofill-event.js 뒤에 스크립트를 추가합니다 .

이렇게하면 다음이 수행됩니다.

• DOMContentLoaded 이후 : 모든 입력 필드 확인
• 필드가 남아 있음 : 동일한 양식의 다른 모든 필드를 확인하십시오.

API (수동으로 확인 트리거) :

• $el.checkAndTriggerAutoFillEvent(): 주어진 jQuery / jQLite 요소에서 모든 DOM 요소에 대한 검사를 실행합니다.

작동 원리

1. 사용자 (변경 이벤트 수신) 및 JavaScript (jQuery / jQLite 요소에 대해 $ el.val () 가로 채기)에 의한 입력 요소의 모든 변경 사항을 기억하십시오. 변경된 값은 개인 속성의 요소에 저장됩니다.

2. 자동 채우기를위한 요소 확인 : 요소의 현재 값을 기억 된 값과 비교합니다. 다른 경우 변경 이벤트를 트리거합니다.

의존성

AngularJS 또는 jQuery (하나 또는 둘 모두에서 작동)

더 많은 정보와 소스는 github 페이지에 있습니다.

Github의 원래 Angular Issue # 1460은 여기에서 읽을 수 있습니다.

더티 코드, 이 코드를 사용하기 전에 https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 문제 가 수정 되었는지 확인 하세요 . 이 지시문은 제출 전뿐만 아니라 필드가 채워질 때 이벤트를 트리거합니다 (제출 전에 입력을 처리해야하는 경우 필요함).

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

명확한 직선 솔루션처럼 보입니다. jQuery가 필요하지 않습니다.

최신 정보:

• 모델 값이 실제 입력 값과 같지 않은 경우에만 모델이 업데이트됩니다.
• 검사는 첫 번째 자동 완성에서 멈추지 않습니다. 예를 들어 다른 계정을 사용하려는 경우.

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 [$ timeout 사용] :

지령:

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 [각도 ​​이벤트 사용] :

참조 : Becko의 대답

지령:

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 [릴레이 메서드 호출 사용] :

지령:

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>

글쎄, 가장 쉬운 방법은 브라우저의 동작을 에뮬레이트하는 것이므로 변경 이벤트에 문제가 있으면 직접 실행하십시오. 훨씬 간단합니다.

지령:

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>

양식에 지시문을 배치하고 양식 제출시 .dirty 클래스를 사용하여 모든 입력에 대해 이벤트를 발생시키는 것과 같은 몇 가지 변형을 수행 할 수 있습니다.

이것은 jQuery 방식입니다.

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

이것은 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 /> 

덜 해커하지만 컨트롤러에 추가 코드가 필요한 또 다른 해결 방법이 있습니다.

HTML :

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

지시문 (CoffeeScript) :

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

제어 장치:

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

이것은 제출 버튼의 비활성화 / 활성화를 포함하여 모든 Angular의 유효성 검사가 설계된대로 작동하도록 허용 한 유일한 솔루션입니다. bower 및 1 개의 스크립트 태그로 설치합니다. 바 징가!

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

시간 초과 기능을 사용하는 대신 모델 값을 변경하는 것이 효과적이었습니다.

내 코드는 다음과 같습니다.

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

제출 처리기에서 한 줄짜리 해결 방법 (jQuery 필요) :

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

제출시 $ setValue (val ())을 강제합니다. ( 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);

저는 Angularjs를 처음 접했지만 그 문제에 대한 간단한 해결책을 찾았습니다 => Angular가 표현을 재평가하도록 ... 변경하여! (물론 초기 상태로 되돌리려면 초기 값을 기억해야합니다.) 다음은 양식을 제출하기 위해 컨트롤러 함수에 들어가는 방식입니다.

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

물론 암호 입력에 입력 한 값은 사용자가 아닌 창에 의해 설정되었습니다.

이 코드를 시도해 볼 수 있습니다.

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

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

이 답변에 대한 사소한 수정 ( https://stackoverflow.com/a/14966711/3443828 ) : $ timeout 대신 $ interval을 사용하여 브라우저를 경주 할 필요가 없습니다.

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

이것은 내가 내 양식에서 사용한 솔루션입니다.

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

그리고 양식의 템플릿은

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

이런 식으로 ng-model에있는 모든 파서 / 포매터를 실행하고 제출 기능을 투명하게 유지할 수있었습니다.

지시문이없는 솔루션 :

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

이것은 Firefox와 Chrome에서 테스트 한 모든 경우에 적용되는 간단한 수정입니다. 최상위 답변 (시간 초과가있는 지시문)에 문제가 있음을 유의하십시오.

• 브라우저 뒤로 / 앞으로 버튼, 페이지로드 이벤트를 다시 실행하지 않음 (수정 사항이 적용되지 않음)
• 페이지로드 후 얼마 동안 자격 증명을로드합니다. 예를 들어 Firefox에서는 로그인 상자를 두 번 클릭하고 저장된 자격 증명 중에서 선택합니다.
• 유효한 입력이 제공 될 때까지 로그인 버튼을 비활성화하기 때문에 양식 제출 전에 업데이트하는 솔루션이 필요합니다.

이 수정은 분명히 매우 멍청하고 엉뚱하지만 100 % 작동합니다.

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

이 솔루션 중 어느 것도 내 사용 사례에 적합하지 않았습니다. ng-change를 사용하여 변경 사항을 확인하는 양식 필드가 있습니다. 사용$watch 은 자동 완성에 의해 트리거되지 않으므로 도움이되지 않습니다. 제출 버튼이 없기 때문에 솔루션 중 일부를 실행하는 쉬운 방법이 없으며 간격을 사용하여 성공하지 못했습니다.

나는 자동 완성 기능을 비활성화했습니다. 이상적이지는 않지만 사용자에게는 훨씬 덜 혼란 스러웠습니다.

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

여기 에서 답을 찾았습니다 .

jQuery를 사용하는 경우 양식 제출에서 다음을 수행 할 수 있습니다.

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

간단하게 유지하려면 자바 스크립트를 사용하여 값을 얻으십시오.

각도 js 컨트롤러에서 :

var username = document.getElementById ( 'username'). value;