javascript - 使用 Angular Directive(指令)切换单个项目

Question

我有一个“可切换”项目的列表。当您单击“可切换”元素时，该元素会使用 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>

Answer 1

在您原来的 plunker 中，这使您的函数具有全局范围，因此具有此指令的所有元素都在执行它:

closeToggle = function(event) {

如果你将这个函数的范围隔离到你的指令中，就像这样，它会正常工作

var closeToggle = function(event) {