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

 
/*
 * 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="/UploadFiles/2021-04-02/{{hash}}">

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。