みなさんこんにちは。 最近では、1つのプロジェクトで、「電子メールを記憶する」必要がありました。
要件は簡単です。ユーザーが電子メールを入力した後は、Cookieに記憶され、次にサイトにアクセスするときに自動的に入力される必要があります。
AngularJS、失敗しませんでした！ ソリューションはコンパクトで、視覚的であることが望まれました。
- Javascriptはディレクティブを定義します
- htmlでは、ディレクティブを使用して、「記憶」する必要があるものを示します
cookieを使用するために、
jqueryおよび
jquery-cookieプラグインが使用されました。
これが実際のデモです
http://jsfiddle.net/dzb5rcsw/詳細
さらに、提案されたソリューションをかみます。 退屈したら、記事の最後のコードにスキップしてください。
私見では、どの電子メールを記憶するかを宣言する最も簡潔な方法は、ディレクティブを使用することです。
<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あります。
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 }; } })();
ご清聴ありがとうございました。 批判は大歓迎です。