提升代码的可读性系列--基础篇（增强代码可读性是函数的作用吗）
798
2022-07-31
改善用户体验的 3 个 AngularJS 指令
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< 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 *
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(/
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~