改善用户体验的 3 个 AngularJS 指令

网友投稿 296 2022-06-13


AngularJS指令可以为给你的访问者提供更好的用户体验,比如通过展示用户头像来使页面看起来更具个性化。在你的注册表单中,可以在电子邮箱地址一栏的旁边展示一个头像,指示用户输入的是否是一个正确的邮件地址。如果在你的表单中有可选输入项,你可以默认隐藏它们,当用户点击时再展示出来,并且立刻自动将焦点对准第一个输入框。这些方法非常容易实现,并且可以通过指令来获得复用。

你有许多方式来构建AngularJS指令。关于如果创建用户指令已经有非常多的教程和指导(所以我不打算在此描述一些基本的东西):

AngularJS:开发者指南

Sidepoint:实用指南

...

我这里选取了三条对于提升用户体验非常有帮助的指令,并且我很早就将其应用在产品中。

1.头像图片

为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来做到这些,并且可以复用。

/*

* 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(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

scope.hash = md5(value.toLowerCase());

scope.size = attrs.size;

if(angular.isUndefined(scope.size)) {

scope.size = 60; // default to 60 pixels

}

});

}

};

});

2. Focus-Me

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.

/**

* 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();

});

}

});

}

};

}]);

2. 关注我

这其实是一个非常简短的指令,但是非常棒。在下面的例子中,用户点击了一个链接,显示的输入框需要能够自动获得焦点。这样,用户在页面显示时不必再手动点击文本域。

/**

* 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元素模型绑定

我们使用contenteditable而不是textarea元素的最主要原因在于使用前者可以在布局和UI中没有限制。我们在编辑器中使用这条指令可以实现将contenteditable元素的html和ng-model进行一个双向绑定。目前,在contenteditable元素中并没有支持ng-model。

/**

* 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(/<\/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。

原文地址:http://blog.lingohub.com/developers/2014/08/better-ux-with-angularjs-directives/


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
下一篇:聊Javascript中的AOP编程(javascript aop)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~