Question

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

我想将此指令应用如下：

<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.

        }
    };
}]);

这可能吗？

Answer 1

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 
         }); 
       }); 
     } 
   }; 
 }];

Answer 2

执行此操作有两个主要步骤 - 获取要从属性检查的功能并执行元素的显示/隐藏。

获取功能

首先要注意的是如何从属性

获取功能

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

您可以使用链接方法中已有的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>

采用字符串的Angular Directive

2 个答案:

获取功能

隐藏元素

样品