angularjs - 是否可以在指令中添加ng-属性？

Question

我想做什么就能做的是“包装”的NG-隐藏的行为的“权限”指令......所以我可以做以下

<a href="/" permit="false">Hide me</a> 

一切都很好，如果我决定简单地从元件上“移除”元件;但是，如果我尝试添加一个ng-hide，然后重新编译该元素。不幸的是，这会导致一个无限循环

angular.module('my.permissions', []). 
    directive 'permit', ($compile) -> 
    priority: 1500 
    terminal: true 
    link: (scope, element, attrs) -> 
     element.attr 'ng-hide', 'true' # ultimately set based on the user's permissions 
     $compile(element)(scope) 

OR

angular.module('my.permissions', []).directive('permit', function($compile) { 
    return { 
    priority: 1500, 
    terminal: true, 
    link: function(scope, element, attrs) { 
     element.attr('ng-hide', 'true'); // ultimately set based on the user's permissions 
     return $compile(element)(scope); 
    } 
    }; 
}); 

我已经试过了没有优先级或终端无济于事。我已经尝试了许多其他的排列组合（包括删除'permit'属性以防止它不断重新编译，但是它似乎归结为：似乎没有办法修改元素的属性并重新编译内联通过

一个指令。我敢肯定有我丢失的东西。

Answer 1

此解决方案假定您想要观看的permit属性的变化，如果它改变和隐藏用仿佛元素ng-hide指令一种方法是观察permit属性更改，然后在需要隐藏或显示元素时提供适当的逻辑为了隐藏和显示元素，可以复制中的角度指令source code。

directive('permit', ['$animate', function($animate) { 
    return { 
    restrict: 'A', 
    multiElement: true, 
    link: function(scope, element, attr) { 
     scope.$watch(attr.permit, function (value){ 

     // do your logic here 
     var condition = true; 
     // this variable here should be manipulated in order to hide=true or show=false the element. 
     // You can use the value parameter as the value passed in the permit directive to determine 
     // if you want to hide the element or not. 

     $animate[condition ? 'addClass' : 'removeClass'](element, 'ng-hide'); 

     // if you don't want to add any animation, you can simply remove the animation service 
     // and do this instead: 
     // element[condition? 'addClass': 'removeClass']('ng-hide'); 
     }); 
    } 
    }; 
}]); 

Answer 2

angular.module('my.permissions', []).directive('permit', function($compile) { 
    return { 
    priority: 1500, 
    terminal: true, 
    link: function(scope, element, attrs) { 
     scope.$watch(function(){ 
     var method = scope.$eval(attrs.permit) ? 'show' : 'hide'; 
     element[method](); 
     }); 
    } 
    }; 
}); 

Answer 3

我使用这个指令。这工作像ng-if，但它检查权限。

appModule.directive("ifPermission", ['$animate', function ($animate) { 
    return { 
     transclude: 'element', 
     priority: 600, 
     terminal: true, 
     restrict: 'A', 
     $$tlb: true, 
     link: function ($scope, $element, $attr, ctrl, $transclude) { 
      var block, childScope; 

      var requiredPermission = eval($attr.ifPermission); 
      // i'm using global object you can use factory or provider 
      if (window.currentUserPermissions.indexOf(requiredPermission) != -1) { 

        childScope = $scope.$new(); 
        $transclude(childScope, function (clone) { 
         clone[clone.length++] = document.createComment(' end ifPermission: ' + $attr.ngIf + ' '); 
         // Note: We only need the first/last node of the cloned nodes. 
         // However, we need to keep the reference to the jqlite wrapper as it might be changed later 
         // by a directive with templateUrl when it's template arrives. 
         block = { 
          clone: clone 
         }; 
         $animate.enter(clone, $element.parent(), $element); 
        }); 
      } 
     } 
    }; 
}]); 

用法：

<div if-permission="requiredPermission">Authorized content</div>