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


Posted in Javascript onJune 18, 2015

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。

Javascript 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
vue下的@change事件的实现
Oct 25 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 #Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 #Javascript
浅谈Node.js中的定时器
Jun 18 #Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 #Javascript
Node.js事件驱动
Jun 18 #Javascript
详解AngularJS的通信机制
Jun 18 #Javascript
javascript背景时钟实现方法
Jun 18 #Javascript
You might like
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
js表达式与运算符简单操作示例
2020/02/15 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python pandas常用函数详解
2018/02/07 Python
python 自动批量打开网页的示例
2019/02/21 Python
django fernet fields字段加密实践详解
2019/08/12 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
高中军训第一天感言
2014/03/06 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
升学宴演讲稿
2014/09/01 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python