日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
改善用戶體驗(yàn)的3個(gè)AngularJS指令

AngularJS指令可以為給你的訪問者提供更好的用戶體驗(yàn)，比如通過展示用戶頭像來使頁面看起來更具個(gè)性化。在你的注冊表單中，可以在電子郵箱地址一欄的旁邊展示一個(gè)頭像，指示用戶輸入的是否是一個(gè)正確的郵件地址。如果在你的表單中有可選輸入項(xiàng)，你可以默認(rèn)隱藏它們，當(dāng)用戶點(diǎn)擊時(shí)再展示出來，并且立刻自動將焦點(diǎn)對準(zhǔn)第一個(gè)輸入框。這些方法非常容易實(shí)現(xiàn)，并且可以通過指令來獲得復(fù)用。

成都創(chuàng)新互聯(lián)主營莆田網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),莆田h5微信小程序定制開發(fā)搭建,莆田網(wǎng)站營銷推廣歡迎莆田等地區(qū)企業(yè)咨詢

你有許多方式來構(gòu)建AngularJS指令。關(guān)于如果創(chuàng)建用戶指令已經(jīng)有非常多的教程和指導(dǎo)（所以我不打算在此描述一些基本的東西）：

  • AngularJS：開發(fā)者指南

  • Sidepoint：實(shí)用指南

  • ...

我這里選取了三條對于提升用戶體驗(yàn)非常有幫助的指令，并且我很早就將其應(yīng)用在產(chǎn)品中。

1.頭像圖片

為了在你的應(yīng)用中展示頭像圖片，你需要使用用戶的電子郵件地址，將地址轉(zhuǎn)換為小寫并使用md5加密該字符串。所以聰明的做法是使用指令來做到這些，并且可以復(fù)用。

 
 
    
  
  
  1. /* 
    2. 
  
  
  2.  * A simple Gravatar Directive 
    3. 
  
  
  3.  * @example 
    4. 
  
  
  4.  *    
    5. 
  
  
  5.  */
    6. 
  
  
  6. app.directive('gravatarImage', function () { 
    7. 
  
  
  7.   return { 
    8. 
  
  
  8.     restrict: 'AE', 
    9. 
  
  
  9.     replace: true, 
    10. 
  
  
  10.     required: 'email', 
    11. 
  
  
  11.     template: '', 
    12. 
  
  
  12.     link: function (scope, element, attrs) { 
    13. 
  
  
  13.       attrs.$observe('email', function (value) { 
    14. 
  
  
  14.         if(!value) { return; } 
    15. 
  
  
  15.   
    16. 
  
  
  16.         // MD5 (Message-Digest Algorithm) by WebToolkit 
    17. 
  
  
  17.         var md5=function(s){function L(k,d){return(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>>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;F127)&&(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
  
  
  18.   
    19. 
  
  
  19.         scope.hash = md5(value.toLowerCase()); 
    20. 
  
  
  20.         scope.size = attrs.size; 
    21. 
  
  
  21.   
    22. 
  
  
  22.         if(angular.isUndefined(scope.size)) { 
    23. 
  
  
  23.           scope.size = 60; // default to 60 pixels 
    24. 
  
  
  24.         } 
    25. 
  
  
  25.       }); 
    26. 
  
  
  26.     } 
    27. 
  
  
  27.   }; 
    28. 
  
  
  28. }); 
    29. 
  
  
  29. 2. Focus-Me 
    30. 
  
  
  30.   
    31. 
  
  
  31. It is really just a small directive, but it’s awesome. In the example below the user clicks on a link, where he makes an input visible, which gets automatically focused. So he doesn’t need to click in the input field when it shows up. 
    32. 
  
  
  32. /** 
    33. 
  
  
  33.  * Sets focus to this element if the value of focus-me is true. 
    34. 
  
  
  34.  * @example 
    35. 
  
  
  35.  *  add name 
    36. 
  
  
  36.  *   
    37. 
  
  
  37.  */
    38. 
  
  
  38. app.directive('focusMe', ['$timeout', function($timeout) { 
    39. 
  
  
  39.   return { 
    40. 
  
  
  40.     scope: { trigger: '@focusMe' }, 
    41. 
  
  
  41.     link: function(scope, element) { 
    42. 
  
  
  42.       scope.$watch('trigger', function(value) { 
    43. 
  
  
  43.         if(value === "true") { 
    44. 
  
  
  44.           $timeout(function() { 
    45. 
  
  
  45.             element[0].focus(); 
    46. 
  
  
  46.           }); 
    47. 
  
  
  47.         } 
    48. 
  
  
  48.       }); 
    49. 
  
  
  49.     } 
    50. 
  
  
  50.   }; 
    51. 
  
  
  51. }]);
    52.

2. 關(guān)注我

這其實(shí)是一個(gè)非常簡短的指令，但是非常棒。在下面的例子中，用戶點(diǎn)擊了一個(gè)鏈接，顯示的輸入框需要能夠自動獲得焦點(diǎn)。這樣，用戶在頁面顯示時(shí)不必再手動點(diǎn)擊文本域。

 
 
    
  
  
  1. /** 
    2. 
  
  
  2.  * Sets focus to this element if the value of focus-me is true. 
    3. 
  
  
  3.  * @example 
    4. 
  
  
  4.  *  add name 
    5. 
  
  
  5.  *   
    6. 
  
  
  6.  */
    7. 
  
  
  7. app.directive('focusMe', ['$timeout', function($timeout) { 
    8. 
  
  
  8.   return { 
    9. 
  
  
  9.     scope: { trigger: '@focusMe' }, 
    10. 
  
  
  10.     link: function(scope, element) { 
    11. 
  
  
  11.       scope.$watch('trigger', function(value) { 
    12. 
  
  
  12.         if(value === "true") { 
    13. 
  
  
  13.           $timeout(function() { 
    14. 
  
  
  14.             element[0].focus(); 
    15. 
  
  
  15.           }); 
    16. 
  
  
  16.         } 
    17. 
  
  
  17.       }); 
    18. 
  
  
  18.     } 
    19. 
  
  
  19.   }; 
    20. 
  
  
  20. }]);
    21.

3.Contenteditable元素模型綁定

我們使用contenteditable而不是textarea元素的最主要原因在于使用前者可以在布局和UI中沒有限制。我們在編輯器中使用這條指令可以實(shí)現(xiàn)將contenteditable元素的html和ng-model進(jìn)行一個(gè)雙向綁定。目前，在contenteditable元素中并沒有支持ng-model。

 
 
    
  
  
  1. /** 
    2. 
  
  
  2.  * Two-way data binding for contenteditable elements with ng-model. 
    3. 
  
  
  3.  * @example 
    4. 
  
  
  4.  *   
     
    5. 
  
  
  5.  */
    6. 
  
  
  6. app.directive('contenteditable', function() { 
    7. 
  
  
  7.   return { 
    8. 
  
  
  8.     require: '?ngModel', 
    9. 
  
  
  9.     link: function(scope, element, attrs, ctrl) { 
    10. 
  
  
  10.   
    11. 
  
  
  11.       // Do nothing if this is not bound to a model 
    12. 
  
  
  12.       if (!ctrl) { return; } 
    13. 
  
  
  13.   
    14. 
  
  
  14.       // Checks for updates (input or pressing ENTER) 
    15. 
  
  
  15.       // view -> model 
    16. 
  
  
  16.       element.bind('input enterKey', function() { 
    17. 
  
  
  17.         var rerender = false; 
    18. 
  
  
  18.         var html = element.html(); 
    19. 
  
  
  19.   
    20. 
  
  
  20.         if (attrs.noLineBreaks) { 
    21. 
  
  
  21.           html = html.replace(/
    /g, '').replace(/
    /g, '').replace(/<\/div>/g, ''); 
    22. 
  
  
  22.           rerender = true; 
    23. 
  
  
  23.         } 
    24. 
  
  
  24.   
    25. 
  
  
  25.         scope.$apply(function() { 
    26. 
  
  
  26.           ctrl.$setViewValue(html); 
    27. 
  
  
  27.           if(rerender) { 
    28. 
  
  
  28.             ctrl.$render(); 
    29. 
  
  
  29.           } 
    30. 
  
  
  30.         }); 
    31. 
  
  
  31.       }); 
    32. 
  
  
  32.   
    33. 
  
  
  33.       element.keyup(function(e){ 
    34. 
  
  
  34.         if(e.keyCode === 13){ 
    35. 
  
  
  35.           element.trigger('enterKey'); 
    36. 
  
  
  36.         } 
    37. 
  
  
  37.       }); 
    38. 
  
  
  38.   
    39. 
  
  
  39.       // model -> view 
    40. 
  
  
  40.       ctrl.$render = function() { 
    41. 
  
  
  41.         element.html(ctrl.$viewValue); 
    42. 
  
  
  42.       }; 
    43. 
  
  
  43.   
    44. 
  
  
  44.       // load init value from DOM 
    45. 
  
  
  45.       ctrl.$render(); 
    46. 
  
  
  46.     } 
    47. 
  
  
  47.   }; 
    48. 
  
  
  48. });
    49.

結(jié)論：AngularJS指令可用于改善用戶體驗(yàn)

我希望經(jīng)過文中的介紹，你會感悟到AngularJS指令的有用之處。

對我而言，指令是AngularJS中最激動人心的特性。創(chuàng)建可重用的組件，并可以將其添加到純粹的HTML應(yīng)用程序庫，這是多么難以置信并且強(qiáng)大的功能。由于指令實(shí)用，并且大部分指令書寫難度不高，許多開發(fā)者早已對于目前受歡迎的庫開發(fā)了許多指令。舉例來說，AngularJS團(tuán)隊(duì)已經(jīng)為Bootstrap創(chuàng)建了一系列的指令（難道還有人不用它嗎？），被稱作UI Bootstrap。

英文：Improve user experience with these 3 AngularJS directives

譯文：http://www.oschina.net/translate/better-ux-with-angularjs-directives


網(wǎng)站標(biāo)題：改善用戶體驗(yàn)的3個(gè)AngularJS指令
文章地址：http://www.dlmjj.cn/article/dpgched.html