我有一个“可切换”项目的列表。当您单击“可切换”元素时,该元素会使用 ng-show 指令展开。如果在项目内部单击,项目将保持打开状态,但如果单击别处,项目将收缩。
我实现它的方法是使用一个指令,它公开一个绑定(bind)属性 isOpen。 isOpen 的值在指令链接函数中更改。在元素单击时,isOpen 的值设置为 true,并将关闭函数绑定(bind)到 $document 单击事件。如果在元素外部单击,将调用关闭函数,将 isOpen 设置为 false 并取消绑定(bind)文档单击事件。
这对于该指令的单个实例来说工作正常,但如果引入了两个或更多实例,则除第一次单击之外的每个元素的关闭函数都无法将相应的 isOpen 属性设置为 false。
这是一个 Plunker:http://plnkr.co/edit/ZNTRc2uL73kFZJmYOvhh?p=preview
指令看起来像这样:
app.directive('myToggle', ['$document', function ($document) {
var closeToggle = null;
return {
restrict: 'A',
scope: { isOpen: '=myToggle' },
link: link
};
function link(scope, element, attributes) {
scope.$on('$locationChangeSuccess', function () { if (closeToggle) closeToggle(); });
element.bind('click', function() {
closeToggle = function(event) {
if (event)
if (element.parent().find(event.target).length != 0 && scope.isOpen)
return false;
$document.unbind('click', closeToggle);
scope.$apply(function () {
scope.isOpen = false;
});
closeToggle = angular.noop;
};
if (!scope.isOpen) {
scope.$apply(function() {
scope.isOpen = true;
});
$document.bind('click', closeToggle);
}
});
};
}]);
app.directive('myToggleCard', [function () {
// Usage:
//
// Creates:
//
var directive = {
link: link,
restrict: 'E',
template: '<a data-my-toggle="isOpen" data-ng-show="!isOpen" href="">ClickMe</a><div data-ng-if="isOpen"> Extra Content </div>',
replace: true,
scope: {
}
};
return directive;
function link(scope, element, attrs) {
scope.isOpen = false;
}
}]);
html 看起来像这样:
<div>
<div>
<my-toggle-card></my-toggle-card>
<my-toggle-card></my-toggle-card>
<my-toggle-card></my-toggle-card>
<my-toggle-card></my-toggle-card>
</div>
</div>
最佳答案
在您原来的 plunker 中,这使您的函数具有全局范围,因此具有此指令的所有元素都在执行它:
closeToggle = function(event) {
如果你将这个函数的范围隔离到你的指令中,就像这样,它会正常工作
var closeToggle = function(event) {
关于javascript - 使用 Angular Directive(指令)切换单个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21709066/