欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-14 16:35:14
1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来做到这些,并且可以复用。...

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}}?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。