Anglejs가 브라우저 자동 양식 채우기를 지원하도록 합니다._AngularJS

최근 많은 프런트엔드 학생들이 로그인 양식에 자신의 계정이 기록되지 않는다는 불만을 제기했습니다. 이는 Ajax를 많이 사용하는 단일 페이지 애플리케이션과 웹 페이지에서 여전히 흔히 발생하는 문제입니다.

UserApp은angularjs를 사용하여 구축된 WebApp이지만 브라우저의 "비밀번호 저장" 기능을 지원하지 못했습니다.
발견된 문제 중 일부는 다음과 같습니다.

js를 사용하여 양식을 DOM에 동적으로 삽입할 수 없습니다.
양식은 실제로 POST 요청을 작성해야 합니다. (양식 내용을 가져온 후 ajax로 요청할 수 없습니다.)
브라우저가 자동으로 양식을 채울 때 $scope는 업데이트된 데이터를 얻을 수 없습니다.
Firefox는 비교적 간단합니다. 양식 요소에 이름 속성이 있고 제출 이벤트가 트리거되면 사용자에게 데이터 기록 여부를 자동으로 알려줍니다.

코드 복사 코드는 다음과 같습니다.

양식>

Firefox가 데이터를 기록하기 위한 요구 사항은 비교적 간단합니다

그런데 Firefox에 문제가 있어서 자동으로 양식을 작성한 후 $scope의 데이터가 업데이트되지 않습니다. 그래서 구글링을 하다가 이 문제에 대한 몇 가지 해킹 방법을 찾았습니다. 그러나 나는 항상 이러한 솔루션이 불필요하다고 생각합니다. 왜냐하면 나에게 필요한 것은 매우 미끄러운 양방향 데이터 바인딩 기술이 아니라 양식을 제출할 때 데이터를 가져오는 것뿐이기 때문입니다. 그래서 저는 매우 간단한 방법을 채택했습니다. 양식을 제출할 때 양식 요소의 값을 가져오는 것입니다.

코드 복사 코드는 다음과 같습니다.

$scope.login = 함수() {
$scope.user = {
로그인: $("#login").val(),
비밀번호: $("#password").val()
};
...
거짓을 반환합니다.
};

좋아, 이제 Firefox에는 문제가 없지만 Chrome은 어떻습니까?

Chrome은 양식이 실제로 POST 요청을 시작할 때만 사용자에게 비밀번호를 저장할지 묻는 메시지를 표시하지만 이 경우 Ajax에서는 작동할 수 없습니다.

해결책은 다음과 같습니다.

양식이 Post 요청을 발행하면 ng-submit을 사용하여 이를 가로채고, false를 반환하여 차단하고, ajax를 사용하여 데이터를 제출합니다.
Ajax가 성공적으로 반환되면 세션이 쿠키에 저장되고 양식이 다시 제출됩니다.
페이지를 다시 로드하면 인증된 것으로 확인되어 홈페이지로 리디렉션됩니다.
이렇게 하면 페이지가 한 번 새로 고쳐지지만 로그인할 때만 새로 고쳐야 합니다. 페이지가 동일한 주소로 돌아가는지 확인하세요.
그러나 양식이 DOM에 동적으로 추가되면 이 방법은 여전히 ​​작동하지 않습니다. 해결책은 index.html에 숨겨진 양식을 추가하고, 데이터를 제출해야 할 때 다른 양식에 포함된 데이터를 숨겨진 양식에 복사하는 것입니다.

다음 지시문으로 패키징했습니다.

코드 복사 코드는 다음과 같습니다.

app.directive("ngLoginSubmit", function(){
반환 {
제한: "A",
범위: {
onSubmit: "=ngLoginSubmit"
},
링크: 함수(범위, 요소, 속성) {
          $(element)[0].onsubmit = function() {
                $("#login-login").val($("#login", element).val());
                 $("#login-password").val($("#password", element).val());

범위.onSubmit(함수() {
                       $("#login-form")[0].submit();
            });
              false를 반환합니다.
        };
}
};
});

index.html에 숨겨진 양식:

코드 복사 코드는 다음과 같습니다.

양식>

임시 로그인 양식

코드 복사 코드는 다음과 같습니다.

양식>

로그인 컨트롤러:

코드 복사 코드는 다음과 같습니다.

$scope.login = 기능(제출) {
$scope.user = {
로그인: $("#login").val(),
비밀번호: $("#password").val()
};

함수 ajaxCallback() {
제출();
}  

false를 반환합니다.
};

새로 고침 시 양식을 다시 제출할지 묻는 메시지가 표시됩니다

이제 이 문제는 해결되었지만 f5를 누를 때마다 브라우저에서 양식을 다시 제출할지 여부를 알려줍니다. 이것은 약간 골치 아픈 일이었기 때문에 숨겨진 양식이 데이터를 제출한 다음 index.html로 리디렉션하는 pre-login.html 파일을 추가했습니다.

이제 괜찮아요~