angularjs-是否无法在指令上添加ng属性?
我希望能够为权限指令包装ng hide的行为。。。所以我可以做下面的事情angularjs-是否无法在指令上添加ng属性?,angularjs,compilation,directive,Angularjs,Compilation,Directive,我希望能够为权限指令包装ng hide的行为。。。所以我可以做下面的事情 <a href="/" permit="false">Hide me</a> 或 我在没有优先权或终端的情况下尝试过,但没有任何效果。我尝试过许多其他的排列方式,包括删除“permit”属性以防止它继续重新编译,但归根结底似乎是这样的:似乎没有办法修改元素的属性并通过指令内联重新编译 我确信我遗漏了一些东西。此解决方案假定您希望在permit属性发生更改时观察其更改,并隐藏元素,就像它使用ng h
<a href="/" permit="false">Hide me</a>
或
我在没有优先权或终端的情况下尝试过,但没有任何效果。我尝试过许多其他的排列方式,包括删除“permit”属性以防止它继续重新编译,但归根结底似乎是这样的:似乎没有办法修改元素的属性并通过指令内联重新编译
我确信我遗漏了一些东西。此解决方案假定您希望在permit属性发生更改时观察其更改,并隐藏元素,就像它使用ng hide指令一样。一种方法是观察permit属性的变化,然后在需要隐藏或显示元素时提供适当的逻辑。为了隐藏和显示该元素,您可以在其中的ng hide指令中复制该元素的角度
我正在使用这个指令。这与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>
如果只想执行ng hide=false,为什么需要自定义指令?实际代码将根据用户拥有的权限确定是否在隐藏中执行true或false。您可以在指令中执行$element.hide$element.show。您不需要ng hide。@MajoB您的解决方案假设OP使用的是JQuery。我在作用域$watchattr.permit中遇到一些问题,并最终使用了以下代码:attr.$observe'permit',functionvalue{element['addClass']'ng-hide';}
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');
});
}
};
}]);
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]();
});
}
};
});
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>