3个可以改善用户体验的AngularJS指令介绍(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。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdffp.html