在angularjs中支持瀏覽器自動填表的特性

最近有不少前端同窗都抱怨說，登錄表單都不能記錄本身的帳號。這對於用單頁面(single-page applications)和使用ajax比較多的網頁來講，仍是一個蠻廣泛的問題。

UserApp是一個使用angularjs構建的WebApp，可是他一直未能支持瀏覽器的"save password"特性。
下面就列出了一些發現的問題：

1. 表單不能用js動態的插入DOM。
2. 表單必須真正的發出一個POST請求。（不能獲取表單內容，而後用ajax發出請求）
3. 當瀏覽器自動填表後，$scope並不能得到更新後的數據。

Firefox相對來講簡單一點，只要表單元素有name屬性，觸發提交事件以後，它就會自動提醒用戶是否記錄數據。

<form name="login-form" ng-submit="login()">
    <input id="login" name="login" type="text" ng-model="user.login">
    <input id="password" name="password" type="password" ng-model="user.password">
</form>

可是firefox有一個問題，在自動填表以後，$scope裏的數據並不會更新。因此我google了一下，發現了一些針對此問題的hacks。可是總感受這些解決方案不必，由於我須要的只是在提交表單的時候將數據帶上，而不是一些很溜逼的數據雙向綁定技術。因此我就採用了很簡單的辦法：在提交表單的時候獲取表單元素的值。

$scope.login = function() {
    $scope.user = {
        login: $("#login").val(),
        password: $("#password").val()
    };
    ...
    return false;
};

OK,如今firefox沒問題了，可是chrome怎麼辦呢？

chrome只有在form表單真正發起POST請求的時候纔會提示用戶是否儲存密碼，但這樣的話就不能用Ajax操做了。

下面是解決辦法：

1. 當表單發出Post請求時，用ng-submit截取，返回false將其阻止，同時用ajax提交數據。
2. 當ajax成功返回時，將session儲存在cookies裏，再將表單從新提交一邊。
3. 頁面重載的時候會發現已經認證過了，就將其重定向到主頁。

這會讓頁面刷新一次，但也就是登陸的時候須要刷新而已，確保頁面返回時是同一個地址就好了。
但若是表單是被動態添加進DOM的時候，這個方法仍然不行。解決方案就是在index.html中添加一個隱藏的表單，須要提交數據的時候就將其它表單攜帶的數據複製到隱藏表單裏。

我將它打包成了一個directive：

app.directive("ngLoginSubmit", function(){
return {
    restrict: "A",
    scope: {
        onSubmit: "=ngLoginSubmit"
    },
    link: function(scope, element, attrs) {
        $(element)[0].onsubmit = function() {
            $("#login-login").val($("#login", element).val());
            $("#login-password").val($("#password", element).val());

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

在index.html裏隱藏的表單：

<form name="login-form" id="login-form" method="post" action="" style="display: none;">
    <input name="login" id="login-login" type="text">
    <input name="password" id="login-password" type="password">
</form>

臨時登陸表單

<form name="login-form" autocomplete="on" ng-login-submit="login">
    <input id="login" name="login" type="text" autocomplete="on">
    <input id="password" name="password" type="password" autocomplete="on">
</form>

登陸用的controller:

$scope.login = function(submit) {
    $scope.user = {
        login: $("#login").val(),
        password: $("#password").val()
    };

    function ajaxCallback() {
        submit();
    }   

    return false;
};

如今這個問題解決了，可是每當你按下f5的時候，瀏覽器都會提醒你要不要從新提交表單。這確實有點蛋疼，因此我添加了一個pre-login.html文件，隱藏的表單會提交數據到這裏，而後再重定向到index.html。

如今OK了～

原文地址