Директива AngularJS для запам'ятовування e-mail

Всім привіт. Зовсім недавно, в одному проекті знадобилося зробити запам'ятовування e-mail».

Вимоги прості: після того, як користувач ввів e-mail, його потрібно запам'ятати в cookie автоматично заповнювати при наступних зверненнях до сайту.

AngularJS, не підвів! Рішення вийшло компактним і сподіваюся, наочним.

  1. Javascript визначаємо директиву
  2. В html використовуємо директиву щоб вказати, що потрібно запам'ятати
Для роботи з cookie використовувався
jquery
і плагін
jquery-cookie
.

Ось власне демонстрація http://jsfiddle.net/dzb5rcsw/


Подробиці
Далі я буду розжовувати запропоноване рішення. Якщо занудьгуєте — переходьте до коду в кінці статті.

IMHO найбільш лаконічний спосіб оголосити які e-mail повинні запам'ятовуватися — це використовувати директиву.

<body ng-app='habr-demo-app'>
...
<input type='email' habr-remember-in-cookie='cookie-name-for-email1'/>
...
</body>


У моєму випадку використовувався JSF, там оголошення директиви трохи відрізняється, але суть та ж.

<h:inputText value="#{mybean.email}"
pt:habr-remember-in-cookie="cookie-name-for-email1"/>


Директива
У мене вже був модуль AngularJS, тому я просто додав до нього нову директиву. Але для демонстрації модуль доведеться створити.

Для початку обернем наш код у виклик анонімної функції (щоб не захаращувати глобальний простір імен. А ще тому, що так рекомендують у Angular Style Guide https://github.com/johnpapa/angular-styleguide

(function() {
// Тут буде наш код
)();


Потім оголосимо модуль і директиву

var app = angular.module('habr-demo-app', []);

app.directive('habrRememberInCookie', habrRememberInCookie);

function habrRememberInCookie() {
function link(scope, element, attrs) {
}
return {
restrict: 'A',
link: link
};
}


Як бачите, ніяких складнощів немає — все по документації AngularJS. Від нас потрібно тільки вказати
restrict: 'A'
для того, щоб директиву можна було використовувати тільки як атрибут.

AngularJS викликає функцію
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');
});


Код
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
};
}
})();

Дякую за увагу. Критика вітається.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.