Всем привет. Совсем недавно, в одном проекте понадобилось сделать «запоминание e-mail».
Требования простые: после того, как пользователь ввел e-mail, его нужно запомнить в cookie и автоматически заполнять при следующих обращениях к сайту.
AngularJS, не подвел! Решение получилось компактным и надеюсь, наглядным.
jquery
и плагин jquery-cookie
.<body ng-app='habr-demo-app'>
...
<input type='email' habr-remember-in-cookie='cookie-name-for-email1'/>
...
</body>
<h:inputText value="#{mybean.email}"
pt:habr-remember-in-cookie="cookie-name-for-email1"/>
(function() {
// Здесь будет наш код
)();
var app = angular.module('habr-demo-app', []);
app.directive('habrRememberInCookie', habrRememberInCookie);
function habrRememberInCookie() {
function link(scope, element, attrs) {
}
return {
restrict: 'A',
link: link
};
}
restrict: 'A'
для того, чтобы директиву можно было использовать только как атрибут.link
для каждой директивы на странице. Про нее хорошо написано в документации.link
. В ней нужно записать в поле ввода значение из cookie и настроить обработчик события change
. При возникновении события change
записываем новое значение в 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});
});
}
$destroy
, но в приведенном примере в нем совершенно нечего делать. А вообще, он выглядит вот так.element.on('$destroy', function() {
console.log('Element deleted');
});
<body ng-app='habr-demo-app'>
<input type='email' habr-remember-in-cookie='cookie-name-for-email1'/>
</body>
(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
};
}
})();
К сожалению, не доступен сервер mySQL