AngularJS directive for remembering e-mail
Hello. More recently, in one project, it was necessary to do "remembering e-mail".
The requirements are simple: after the user has entered an e-mail, he needs to be stored in a cookie and automatically filled in during subsequent visits to the site.
AngularJS, did not disappoint! The solution turned out to be compact and I hope, illustrative.
')
Here is the actual demonstration http://jsfiddle.net/dzb5rcsw/
Then I will chew the proposed solution. If you are bored - go to the code at the end of the article.
IMHO is the most concise way to declare which e-mail should be remembered - is to use the directive.
In my case, JSF was used, where the declaration of the directive is slightly different, but the essence is the same.
I already had the AngularJS module, so I just added a new directive to it. But to demonstrate the module will have to create.
To begin with, we wrap our code in an anonymous function call (so as not to clutter up the global namespace. Also, because the Angular Style Guide is so recommended https://github.com/johnpapa/angular-styleguide )
Then we will declare the module and the directive
As you can see, there are no difficulties - all according to the documentation of AngularJS. We only needed to specify
AngularJS calls the
In principle, the entire ceremonial code has already been written, it remains to write the
That's it, it's simple. In an amicable way, you still need to write a
HTML
Javascript
Thanks for attention. Criticism is welcome.
The requirements are simple: after the user has entered an e-mail, he needs to be stored in a cookie and automatically filled in during subsequent visits to the site.
AngularJS, did not disappoint! The solution turned out to be compact and I hope, illustrative.
')
- In Javascript, we define the directive
- In html, use the directive to indicate that you need to "remember"
jquery and the jquery-cookie plugin were used to work with jquery-cookie .
Here is the actual demonstration http://jsfiddle.net/dzb5rcsw/
Details
Then I will chew the proposed solution. If you are bored - go to the code at the end of the article.
IMHO is the most concise way to declare which e-mail should be remembered - is to use the directive.
<body ng-app='habr-demo-app'> ... <input type='email' habr-remember-in-cookie='cookie-name-for-email1'/> ... </body>
In my case, JSF was used, where the declaration of the directive is slightly different, but the essence is the same.
<h:inputText value="#{mybean.email}" pt:habr-remember-in-cookie="cookie-name-for-email1"/>
Directive
I already had the AngularJS module, so I just added a new directive to it. But to demonstrate the module will have to create.
To begin with, we wrap our code in an anonymous function call (so as not to clutter up the global namespace. Also, because the Angular Style Guide is so recommended https://github.com/johnpapa/angular-styleguide )
(function() { // )();
Then we will declare the module and the directive
var app = angular.module('habr-demo-app', []); app.directive('habrRememberInCookie', habrRememberInCookie); function habrRememberInCookie() { function link(scope, element, attrs) { } return { restrict: 'A', link: link }; }
As you can see, there are no difficulties - all according to the documentation of AngularJS. We only needed to specify
restrict: 'A' so that the directive could be used only as an attribute.
AngularJS calls the
link function for each directive on the page. About her well written in the documentation.
In principle, the entire ceremonial code has already been written, it remains to write the
link function itself. In it you need to write the value from the cookie in the input field and configure the change event handler. When a change event occurs, write a new value in the cookie.
function link(scope, element, attrs) { if(!element.val()) { var savedValue = $.cookie(attrs.habrRememberInCookie); element.val(savedValue); } element.on('change', function(event) { var newValue = element.val(); $.cookie(attrs.habrRememberInCookie, newValue, {expires: 360}); }); }
That's it, it's simple. In an amicable way, you still need to write a
$destroy handler, but in the example above, there is absolutely nothing to do. In general, it looks like this.
element.on('$destroy', function() { console.log('Element deleted'); });
Code
HTML
<body ng-app='habr-demo-app'> <input type='email' habr-remember-in-cookie='cookie-name-for-email1'/> </body>
Javascript
(function() { var app = angular.module('habr-demo-app', []); app.directive('habrRememberInCookie', habrRememberInCookie); function habrRememberInCookie() { function link(scope, element, attrs) { if(!element.val()) { var savedValue = $.cookie(attrs.habrRememberInCookie); element.val(savedValue); } element.on('change', function(event) { var newValue = element.val(); $.cookie(attrs.habrRememberInCookie, newValue, {expires: 360}); }); } return { restrict: 'A', link: link }; } })();
Thanks for attention. Criticism is welcome.
Source: https://habr.com/ru/post/260559/
All Articles