接受字符串的角度指令

Angular Directive that takes a string

本文关键字：指令 字符串      更新时间：2023-09-26

我正在尝试创建一个指令，该指令可以显示或隐藏它所在的元素，具体取决于用户是否可以看到某个功能：

查看我的 Plunker 示例

我想像下面这样应用此指令：

<div feature="some-feature-name">
   I have the power!
</div>
angular
.module('app', [])
.directive('feature', ['userService' function(){
    return {
        restrict:'A',
        scope: {},
        link: function(scope, elem, attrs, ngModel){
          // Logic to work out whether someone is permitted to see that feature
          if(userService.canSeeFeature(featureName){
          }
          // Hides the the element it is on if not.
        }
    };
}]);

这可能吗？

执行此操作有两个主要步骤 - 获取要从属性进行检查的特征以及执行元素的显示/隐藏。

获取功能

首先要注意的是如何从属性中获取特征

<div feature="y">AccessGranted</div>

您可以在 使用 link 方法中已有的 attrs 参数中执行此操作。只是

link: function(scope, elem, attrs){
    var theFeature = attrs['feature'];
    var hasAccess = userService.canSeeFeature(theFeature);
}

隐藏元素

接下来，如果他们没有访问权限，则需要隐藏该元素。有几个选项可以执行此操作。

"纯 Angular"方法是在scope上设置一个变量，说明用户是否具有访问权限，然后使用 ng-show 仅在变量为 true 时才显示它：

link: function(scope, elem, attrs){
    scope.hasAccess = userService.canSeeFeature(attrs['feature']);
}
<div feature="y" ng-show="hasAccess">Access Granted</div>

但是，该指令的重点是为您执行此操作。在这种情况下，我认为在指令代码中使用一些简单的jQuery（更具体地说是jqLite）来执行此操作是合理的。如果你的页面中有完整的jQuery elem.hide()更好，但jqLite不支持这个，所以你需要使用css()：

link: function(scope, elem, attrs){
    // check for access
    if(!userService.canSeeFeature(attrs['feature'])) {
        // hide the element
        elem.css('display', 'none');
    }
}

样本

这是一个基于您的 plunkr 的工作示例：

angular
  .module('app', [])
  .service('userService', function() {
    return {
      canSeeFeature: function(feature) {
        // test - only allow access to y
        return feature === 'y';
      }
    }
  })
  .directive('feature', ['userService', function(userService) {
      return {
          restrict:'A',
          scope: {},
          link: function(scope, elem, attrs, ngModel){
            // check for access
            if(!userService.canSeeFeature(attrs['feature'])) {
              // access denied - hide the element
              elem.css('display', 'none');
            }
          }
      };
  }]);
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS Formatters and Parse</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-app="app">
  <div feature="y">y - I have the power!</div>
  <div feature="n">n - I don't have the power :(</div>
  <div feature="y">y - I also have the power!</div>
</body>
</html>

ngShow 指令的修改版本：

var featureDirective = ['$animate', 'userService', function($animate, userService) { 
   return { 
     restrict: 'A', 
     multiElement: true, 
     link: function(scope, element, attr) { 
       scope.$watch(attr.feature, function featureWatchAction(value) {
         $animate[userService.isAllowed(value) ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { 
           tempClasses: NG_HIDE_IN_PROGRESS_CLASS 
         }); 
       }); 
     } 
   }; 
 }];
相关文章：