Introduction to three AngularJS commands that can improve user experience _ AngularJS-js tutorial

This article mainly introduces three AngularJS commands that can improve user experience. AngularJS is a very popular JavaScript framework. For more information, see 1. profile picture

To display a profile picture in your application, you need to use your email address to convert the address to lowercase and use md5 to encrypt the string. Therefore, it is wise to use commands to achieve this and reuse it.

/** A simple Gravatar Directive * @ example *
 */App. directive ('gravatarimage', function () {return {restrict: 'AE', replace: true, required: 'email ', template: '', 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 <
 
  
>>( 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 (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 (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 (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 (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; F
   
    
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
    
     

     
2. Follow me
     
This is actually a very short command, but it is very good. In the following example, the user clicks a link and the displayed input box needs to be automatically focused. In this way, you do not need to manually click the text field when displaying the page.
 

     

     
/** * Sets focus to this element if the value of focus-me is true. * @example * add name *  */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 element model binding
     
The main reason we use contenteditable instead of textarea elements is that the former can be used without restrictions in layout and UI. We can use this command in the editor to implement a bidirectional binding between the html and ng-model of the contenteditable element. Currently, ng-model is not supported in the contenteditable element.
 

     

     
/** * Two-way data binding for contenteditable elements with ng-model. * @example *  
 */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(/
/g, '').replace(/
/g, '').replace(/<\/p>/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();  } };});
     

     
Conclusion: AngularJS commands can be used to improve user experience.
     
I hope that after the introduction, you will understand the usefulness of AngularJS commands.
     
For me, commands are the most exciting feature in AngularJS. Creating reusable components and adding them to a pure HTML application library is incredible and powerful. Many developers have developed many commands for popular libraries because the commands are practical and difficult to write most of them. For example, the AngularJS team has created a series of commands for Bootstrap (Do you still need them ?), It is called UI Bootstrap.