3个可以改善用户体验的AngularJS指令介绍

1.头像图片

为了在你的应用中展示头像图片，你需要使用用户的电子邮件地址，将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来做到这些，并且可以复用。

 
/*
 * a simple gravatar directive
 * @example
 *  <gravatar-image email="[e-mail]" 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}}?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.contenteditable元素模型绑定

我们使用contenteditable而不是textarea元素的最主要原因在于使用前者可以在布局和ui中没有限制。我们在编辑器中使用这条指令可以实现将contenteditable元素的html和ng-model进行一个双向绑定。目前，在contenteditable元素中并没有支持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: '?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团队已经为bootstrap创建了一系列的指令（难道还有人不用它吗？），被称作ui bootstrap。