사용자 경험을 향상시킬 수 있는 3가지 AngularJS 지시어 소개

사용자 경험을 향상시킬 수 있는 3가지 AngularJS 지시어 소개_AngularJS

WBOY

풀어 주다： 2016-05-16 15:53:59

원래의

960명이 탐색했습니다.

1. 아바타 사진

앱에 아바타 이미지를 표시하려면 사용자의 이메일 주소를 가져와서 주소를 소문자로 변환하고 md5를 사용하여 문자열을 암호화해야 합니다. 따라서 현명한 방법은 지침을 사용하여 이를 수행하고 재사용하는 것입니다.

 
/*
 * A simple Gravatar Directive
 * @example
 *  <gravatar-image email="test@email.com" size="50"></gravatar-image>
 */
app.directive('gravatarImage', function () {
 return {
  restrict: 'AE',
  replace: true,
  required: 'email',
  template: '<img ng-src="https://www.gravatar.com/avatar/{{hash}}&#63;s={{size}}&d=identicon" />',
  link: function (scope, element, attrs) {
   attrs.$observe('email', function (value) {
    if(!value) { return; }
 
    // MD5 (Message-Digest Algorithm) by WebToolkit
    var md5=function(s){function L(k,d){return(k<<d)|(k>>>(32-d));}function K(G,k){var I,d,F,H,x;F=(G&2147483648);H=(k&2147483648);I=(G&1073741824);d=(k&1073741824);x=(G&1073741823)+(k&1073741823);if(I&d){return(x^2147483648^F^H);}if(I|d){if(x&1073741824){return(x^3221225472^F^H);}else{return(x^1073741824^F^H);}}else{return(x^F^H);}}function r(d,F,k){return(d&F)|((~d)&k);}function q(d,F,k){return(d&k)|(F&(~k));}function p(d,F,k){return(d^F^k);}function n(d,F,k){return(F^(d|(~k)));}function u(G,F,aa,Z,k,H,I){G=K(G,K(K(r(F,aa,Z),k),I));return K(L(G,H),F);}function f(G,F,aa,Z,k,H,I){G=K(G,K(K(q(F,aa,Z),k),I));return K(L(G,H),F);}function D(G,F,aa,Z,k,H,I){G=K(G,K(K(p(F,aa,Z),k),I));return K(L(G,H),F);}function t(G,F,aa,Z,k,H,I){G=K(G,K(K(n(F,aa,Z),k),I));return K(L(G,H),F);}function e(G){var Z;var F=G.length;var x=F+8;var k=(x-(x%64))/64;var I=(k+1)*16;var aa=Array(I-1);var d=0;var H=0;while(H<F){Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=(aa[Z]|(G.charCodeAt(H)<<d));H++;}Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=aa[Z]|(128<<d);aa[I-2]=F<<3;aa[I-1]=F>>>29;return aa;}function B(x){var k="",F="",G,d;for(d=0;d<=3;d++){G=(x>>>(d*8))&255;F="0"+G.toString(16);k=k+F.substr(F.length-2,2);}return k;}function J(k){k=k.replace(/rn/g,"n");var d="";for(var F=0;F<k.length;F++){var x=k.charCodeAt(F);if(x<128){d+=String.fromCharCode(x);}else{if((x>127)&&(x<2048)){d+=String.fromCharCode((x>>6)|192);d+=String.fromCharCode((x&63)|128);}else{d+=String.fromCharCode((x>>12)|224);d+=String.fromCharCode(((x>>6)&63)|128);d+=String.fromCharCode((x&63)|128);}}}return d;}var C=Array();var P,h,E,v,g,Y,X,W,V;var S=7,Q=12,N=17,M=22;var A=5,z=9,y=14,w=20;var o=4,m=11,l=16,j=23;var U=6,T=10,R=15,O=21;s=J(s);C=e(s);Y=1732584193;X=4023233417;W=2562383102;V=271733878;for(P=0;P<C.length;P+=16){h=Y;E=X;v=W;g=V;Y=u(Y,X,W,V,C[P+0],S,3614090360);V=u(V,Y,X,W,C[P+1],Q,3905402710);W=u(W,V,Y,X,C[P+2],N,606105819);X=u(X,W,V,Y,C[P+3],M,3250441966);Y=u(Y,X,W,V,C[P+4],S,4118548399);V=u(V,Y,X,W,C[P+5],Q,1200080426);W=u(W,V,Y,X,C[P+6],N,2821735955);X=u(X,W,V,Y,C[P+7],M,4249261313);Y=u(Y,X,W,V,C[P+8],S,1770035416);V=u(V,Y,X,W,C[P+9],Q,2336552879);W=u(W,V,Y,X,C[P+10],N,4294925233);X=u(X,W,V,Y,C[P+11],M,2304563134);Y=u(Y,X,W,V,C[P+12],S,1804603682);V=u(V,Y,X,W,C[P+13],Q,4254626195);W=u(W,V,Y,X,C[P+14],N,2792965006);X=u(X,W,V,Y,C[P+15],M,1236535329);Y=f(Y,X,W,V,C[P+1],A,4129170786);V=f(V,Y,X,W,C[P+6],z,3225465664);W=f(W,V,Y,X,C[P+11],y,643717713);X=f(X,W,V,Y,C[P+0],w,3921069994);Y=f(Y,X,W,V,C[P+5],A,3593408605);V=f(V,Y,X,W,C[P+10],z,38016083);W=f(W,V,Y,X,C[P+15],y,3634488961);X=f(X,W,V,Y,C[P+4],w,3889429448);Y=f(Y,X,W,V,C[P+9],A,568446438);V=f(V,Y,X,W,C[P+14],z,3275163606);W=f(W,V,Y,X,C[P+3],y,4107603335);X=f(X,W,V,Y,C[P+8],w,1163531501);Y=f(Y,X,W,V,C[P+13],A,2850285829);V=f(V,Y,X,W,C[P+2],z,4243563512);W=f(W,V,Y,X,C[P+7],y,1735328473);X=f(X,W,V,Y,C[P+12],w,2368359562);Y=D(Y,X,W,V,C[P+5],o,4294588738);V=D(V,Y,X,W,C[P+8],m,2272392833);W=D(W,V,Y,X,C[P+11],l,1839030562);X=D(X,W,V,Y,C[P+14],j,4259657740);Y=D(Y,X,W,V,C[P+1],o,2763975236);V=D(V,Y,X,W,C[P+4],m,1272893353);W=D(W,V,Y,X,C[P+7],l,4139469664);X=D(X,W,V,Y,C[P+10],j,3200236656);Y=D(Y,X,W,V,C[P+13],o,681279174);V=D(V,Y,X,W,C[P+0],m,3936430074);W=D(W,V,Y,X,C[P+3],l,3572445317);X=D(X,W,V,Y,C[P+6],j,76029189);Y=D(Y,X,W,V,C[P+9],o,3654602809);V=D(V,Y,X,W,C[P+12],m,3873151461);W=D(W,V,Y,X,C[P+15],l,530742520);X=D(X,W,V,Y,C[P+2],j,3299628645);Y=t(Y,X,W,V,C[P+0],U,4096336452);V=t(V,Y,X,W,C[P+7],T,1126891415);W=t(W,V,Y,X,C[P+14],R,2878612391);X=t(X,W,V,Y,C[P+5],O,4237533241);Y=t(Y,X,W,V,C[P+12],U,1700485571);V=t(V,Y,X,W,C[P+3],T,2399980690);W=t(W,V,Y,X,C[P+10],R,4293915773);X=t(X,W,V,Y,C[P+1],O,2240044497);Y=t(Y,X,W,V,C[P+8],U,1873313359);V=t(V,Y,X,W,C[P+15],T,4264355552);W=t(W,V,Y,X,C[P+6],R,2734768916);X=t(X,W,V,Y,C[P+13],O,1309151649);Y=t(Y,X,W,V,C[P+4],U,4149444226);V=t(V,Y,X,W,C[P+11],T,3174756917);W=t(W,V,Y,X,C[P+2],R,718787259);X=t(X,W,V,Y,C[P+9],O,3951481745);Y=K(Y,h);X=K(X,E);W=K(W,v);V=K(V,g);}var i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};
 
    scope.hash = md5(value.toLowerCase());
    scope.size = attrs.size;
 
    if(angular.isUndefined(scope.size)) {
     scope.size = 60; // default to 60 pixels
    }
   });
  }
 };
});

로그인 후 복사

2. 팔로우하세요

실제로는 매우 짧은 명령이지만 훌륭한 명령입니다. 아래 예에서는 사용자가 링크를 클릭하면 표시된 입력 상자에 자동으로 초점이 맞춰져야 합니다. 이렇게 하면 사용자는 더 이상 페이지가 표시될 때 텍스트 필드를 수동으로 클릭할 필요가 없습니다.

/**
 * Sets focus to this element if the value of focus-me is true.
 * @example
 * <a ng-click="addName=true">add name</a>
 * <input ng-show="addName" type="text" ng-model="name" focus-me="{{addName}}" />
 */
app.directive('focusMe', ['$timeout', function($timeout) {
 return {
  scope: { trigger: '@focusMe' },
  link: function(scope, element) {
   scope.$watch('trigger', function(value) {
    if(value === "true") {
     $timeout(function() {
      element[0].focus();
     });
    }
   });
  }
 };
}]);

로그인 후 복사

3.컨텐트 편집 가능한 요소 모델 바인딩

textarea 요소 대신 contenteditable을 사용하는 주된 이유는 전자를 사용하면 레이아웃과 UI에 제한이 없기 때문입니다. 편집기에서 이 명령을 사용하여 contenteditable 요소의 html과 ng-model 간의 양방향 바인딩을 달성할 수 있습니다. 현재 ng-model은 콘텐츠 편집 가능 요소에서 지원되지 않습니다.

/**
 * Two-way data binding for contenteditable elements with ng-model.
 * @example
 *  <p contenteditable="true" ng-model="text"></p>
 */
app.directive('contenteditable', function() {
 return {
  require: '&#63;ngModel',
  link: function(scope, element, attrs, ctrl) {
 
   // Do nothing if this is not bound to a model
   if (!ctrl) { return; }
 
   // Checks for updates (input or pressing ENTER)
   // view -> model
   element.bind('input enterKey', function() {
    var rerender = false;
    var html = element.html();
 
    if (attrs.noLineBreaks) {
     html = html.replace(/<div>/g, '').replace(/<br>/g, '').replace(/<\/div>/g, '');
     rerender = true;
    }
 
    scope.$apply(function() {
     ctrl.$setViewValue(html);
     if(rerender) {
      ctrl.$render();
     }
    });
   });
 
   element.keyup(function(e){
    if(e.keyCode === 13){
     element.trigger('enterKey');
    }
   });
 
   // model -> view
   ctrl.$render = function() {
    element.html(ctrl.$viewValue);
   };
 
   // load init value from DOM
   ctrl.$render();
  }
 };
});

로그인 후 복사

결론: AngularJS 지시문을 사용하여 사용자 경험을 향상할 수 있습니다

이 기사의 소개를 마친 후 AngularJS 지침의 유용성을 깨닫게 되기를 바랍니다.

저에게 지시문은 AngularJS의 가장 흥미로운 기능입니다. 순수한 HTML 애플리케이션 라이브러리에 추가할 수 있는 재사용 가능한 구성 요소를 만드는 것이 얼마나 강력한지. 지침이 실용적이고 대부분의 지침을 작성하는 것이 어렵지 않기 때문에 많은 개발자가 이미 현재 널리 사용되는 라이브러리에 대한 많은 지침을 개발했습니다. 예를 들어, AngularJS 팀은 UI Bootstrap이라는 Bootstrap(아직 사용하는 사람이 있습니까?)에 대한 일련의 지시문을 만들었습니다.