angularjs でブラウザの自動フォーム入力をサポートさせよう_AngularJS

最近、多くのフロントエンドの学生が、ログインフォームに自分のアカウントを記録できないと不満を抱いています。これは、Ajax を頻繁に使用する単一ページのアプリケーションや Web ページでは依然として一般的な問題です。

UserApp は angularjs を使用して構築された WebApp ですが、ブラウザの「パスワードの保存」機能をサポートできませんでした。
見つかった問題の一部を次に示します:

js を使用してフォームを DOM に動的に挿入することはできません。
フォームは実際に POST リクエストを行う必要があります。 (フォームの内容を取得してから ajax でリクエストを行うことはできません)
ブラウザがフォームに自動的に入力すると、$scope は更新されたデータを取得できません。
Firefox は比較的単純です。form 要素に name 属性があり、submit イベントがトリガーされると、データを記録するかどうかをユーザーに自動的に通知します。

コードをコピーします コードは次のとおりです:

<フォーム名="ログインフォーム" ng-submit="ログイン()">

Firefox がデータを記録するための要件は比較的単純です

しかし、Firefox には問題があり、フォームに自動的に入力した後、$scope 内のデータが更新されません。そこでグーグルでこの問題を解決するためのハックをいくつか見つけました。しかし、私はこれらのソリューションは不要であると常に感じています。なぜなら、必要なのはフォームを送信するときにデータを持ってくることだけであり、非常に滑りやすい双方向データ バインディング テクノロジではないからです。そこで、フォーム送信時にフォーム要素の値を取得するという非常にシンプルな方法を採用しました。

コードをコピーします コードは次のとおりです:

$scope.login = function() {
$scope.user = {
ログイン: $("#login").val(),
パスワード: $("#password").val()
};
...
false を返します;
};

OK、Firefox では問題ありませんが、Chrome ではどうなるでしょうか?

Chrome は、フォームが実際に POST リクエストを開始するときにのみ、パスワードを保存するかどうかをユーザーに尋ねますが、この場合、Ajax で操作することはできません。

これが解決策です:

フォームが Post リクエストを発行すると、ng-submit を使用してリクエストをインターセプトし、false を返してブロックし、ajax を使用してデータを送信します。
ajax が正常に返されると、セッションは Cookie に保存され、フォームが再送信されます。
ページがリロードされると、認証されたことがわかり、ホームページにリダイレクトされます。
これによりページが 1 回更新されますが、更新が必要なのはログイン時のみです。ページが同じアドレスに戻ることを確認してください。
ただし、フォームが DOM に動的に追加される場合、この方法は依然として機能しません。解決策は、index.html に非表示のフォームを追加し、データを送信する必要があるときに、他のフォームに保持されているデータを非表示のフォームにコピーすることです。

それをディレクティブにパッケージ化しました:

コードをコピーします コードは次のとおりです:

app.directive("ngLoginSubmit", function(){
戻り値 {
制限: "A"、
スコープ: {
onSubmit: "=ngLoginSubmit"
}、
リンク: function(scope, element, attrs) {
$(要素)[0].onsubmit = function() {
$("#login-login").val($("#login", element).val());
$("#ログインパスワード").val($("#パスワード", element).val());

スコープ.onSubmit(function() {
$("#login-form")[0].submit();
});
return false;
};
}
};
});

index.html の隠しフォーム:

コードをコピーします コードは次のとおりです:

一時ログインフォーム

コードをコピーします コードは次のとおりです:

<フォーム名="ログインフォーム" オートコンプリート="オン" ng-login-submit="ログイン">

ログイン用コントローラ:

コードをコピーします コードは次のとおりです:

$scope.login = function(submit) {
$scope.user = {
ログイン: $("#login").val(),
パスワード: $("#password").val()
};

関数 ajaxCallback() {
submit();
}

false を返します;
};

更新時に、フォームを再送信するかどうかを尋ねるメッセージが表示されます

この問題は解決されましたが、f5 キーを押すたびに、ブラウザはフォームを再送信するかどうかを通知します。これは少し面倒だったので、隠しフォームがデータを送信してから、index.html にリダイレクトする pre-login.html ファイルを追加しました。

もう大丈夫ですよ~