Clever Geek Handbook

AngularJS電子メールディレクティブ

みなさんこんにちは。 最近では、1つのプロジェクトで、「電子メールを記憶する」必要がありました。



要件は簡単です。ユーザーが電子メールを入力した後は、Cookieに記憶され、次にサイトにアクセスするときに自動的に入力される必要があります。



AngularJS、失敗しませんでした！ ソリューションはコンパクトで、視覚的であることが望まれました。



  1. Javascriptはディレクティブを定義します
  2. 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 }; } })();


ご清聴ありがとうございました。 批判は大歓迎です。


More articles:


All Articles