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。
上一篇: 数据结构 树
下一篇: 2017.8.26 力 思考记录