Enable angularjs to support automatic table filling in the browser and angularjs to fill in the table

Enable angularjs to support automatic table filling in the browser and angularjs to fill in the table

Recently, many front-end users complained that login forms cannot record their own accounts. This is still a common problem for web pages that use single-page applications and ajax.

UserApp is a WebApp built using angularjs, but it has never supported the "save password" feature of the browser.
The following lists some detected problems:

The form cannot use js to dynamically Insert the DOM.
The form must actually send a POST request. (You cannot obtain the Form Content and then use ajax to send a request)
After the browser automatically fills in the table, $ scope cannot obtain the updated data.
Firefox is relatively simple. As long as the form element has the name attribute, after an event is submitted, it automatically reminds you whether to record data.

Copy codeThe Code is as follows:
<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>

The requirements for data record in firefox are relatively simple.

However, firefox has a problem. After the table is automatically filled in, the data in $ scope is not updated. So I googled and found some hacks for this problem. However, I always feel that these solutions are not necessary, because all I need is to bring data when submitting a form, rather than some very powerful data two-way binding technology. So I adopted a very simple method: Get the value of the form element when submitting the form.

Copy codeThe Code is as follows:
$ Scope. login = function (){
$ Scope. user = {
Login: $ ("# login"). val (),
Password: $ ("# password"). val ()
};
...
Return false;
};

Okay. Now firefox is okay, but what about chrome?

Chrome will prompt the user whether to store the password only when the form actually initiates the POST request, but in this case, the Ajax operation will not be available.

The solution is as follows:

When a form sends a Post request, use ng-submit to intercept it, return false to block it, and submit data with ajax.
When ajax returns a successful result, the session is stored in cookies and the form is resubmitted.
When the page is reloaded, you will find that the authentication has been completed and redirect it to the home page.
This will refresh the page once, but that is, the page needs to be refreshed during login. Make sure that the page returns the same address.
However, if the form is dynamically added to the DOM, this method still does not work. Add a hidden form to index.html. When you need to submit data, copy the data carried by other forms to the hidden form.

I packaged it into a directive:

Copy codeThe Code is as follows:
App. directive ("ngLoginSubmit", function (){
Return {
Restrict: "",
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;
};
}
};
});

Form hidden in index.html:

Copy codeThe Code is as follows:
<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>

Temporary logon form

Copy codeThe Code is as follows:
<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>

Logon controller:

Copy codeThe Code is as follows:
$ Scope. login = function (submit ){
$ Scope. user = {
Login: $ ("# login"). val (),
Password: $ ("# password"). val ()
};

Function ajaxCallback (){
Submit ();
}

Return false;
};

When refreshing, the system will prompt whether to resubmit the form.

Now this problem is solved, but every time you press f5, the browser will remind you whether to resubmit the form. .

Now OK ~