AngularJS:丢失了指令的范围 [英] AngularJS : Directive transcluded scope lost
问题描述
我正在构建指令,我称其为需要授权"以包装ng-if指令.我想按以下方式使用它:
I’m building a directive, I’m calling ‘requires-authorization’ to wrap an ng-if directive. I’d like to use it as follows:
<requires-authorization role='SuperUser'>
<!— super secret user stuff goes here, within
the scope of this view's controller —>
</requires-authorization>
我已经做到了:
angular.module('myApp').directive('requiresAuthorization', function() {
return {
template: '<div ng-if=\'iAmInRole\' ng-transclude></div>',
restrict: 'E',
transclude: true,
scope: {
role: '@'
},
controller: function($scope, UserService) {
$scope.iAmInRole = (UsersService.myRoles.indexOf($scope.role) !== -1);
}
};
});
这有效,但是指令中包含的内容失去了作用域,特别是在其中找到的视图的控制器的作用域.我忽略了什么?
This works, but the content contained within the directive loses its scope, specifically the scope of the controller of the view it's found within. What am I overlooking?
jsfiddle供参考: http://jsfiddle.net/HbAmG/8/ 请注意,auth值如何不在指令内部显示,而是在指令外部可用.
jsfiddle for reference: http://jsfiddle.net/HbAmG/8/ Notice how the auth value isn't displayed inside the directive, but is available outside directive.
推荐答案
ng-if
和ng-transclude
指令均在指令中执行包含.在这种情况下,内置的transclude机制无法正常工作,您应该实现自己的ngIf
以使其按预期工作:
Both ng-if
and ng-transclude
directives perform transclusion in your directive. In this case build-in transclude mechanism does not work fine and you should implement ngIf
of yourself to make it work as expected:
JavaScript
app.directive('requiresAuthorization', function () {
return {
template: '<div ng-transclude></div>',
restrict: 'E',
transclude: true,
scope: {
role: '@'
},
controller: function ($scope) {
$scope.iAmInRole = true;
},
link: function(scope, element, attr, ctrl, transcludeFn) {
transcludeFn(function(clone) { // <= override default transclude
element.empty();
if(scope.iAmInRole) { // <= implement ngIf by yourself
element.append(clone);
}
});
}
};
});
柱塞: http://plnkr.co/edit/lNIPoJg786O0gVOoro4z?p=preview
如果您可以使用ng-show
而不是ng-if
来进行选择,那么它也可能是一个非常简单的解决方法.唯一的副作用是隐藏的数据将在DOM中显示并使用CSS .ng-hide {display: none !important;}
隐藏.
If ng-show
is an option for you to use instead of ng-if
it may be a very simple workaround as well. The only side effect is that hidden data will be presented in the DOM and hidden using CSS .ng-hide {display: none !important;}
.
JSFiddle: http://jsfiddle.net/WfgXH/3/
JSFiddle: http://jsfiddle.net/WfgXH/3/
由于该帖子描述了类似的问题,因此它也可能对您有用: https://stackoverflow.com/a/22886515/1580941
This post may also be useful for you since it describes the similar issue: https://stackoverflow.com/a/22886515/1580941
这篇关于AngularJS:丢失了指令的范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!