AngularJS 折叠指令。折叠除自己之外的所有内容

【问题标题】：AngularJS collapse directive. Collapse all but selfAngularJS 折叠指令。折叠除自己之外的所有内容
【发布时间】：2013-07-11 02:39:59
【问题描述】：

我正在努力为表现得像手风琴的折叠/展开指令找到最佳解决方案，即。任何时候都只能打开页面上的一个折叠/展开指令。

解决这个问题的最佳方法是什么，并获得一个扩展指令来告诉其他指令折叠？我可以使用隔离范围、父控制器、广播事件吗？基本上我很难理解指令间通信。

我知道有可用的手风琴指令，但我想自己学习构建指令。谢谢。

【问题讨论】：

考虑到angularui-bootstrap-accordion 是干净/优雅的，但仍然需要几百行代码和对指令复杂性的理解，这可能是一个粗略的指令开始。我会首先尝试让一个指令对另一个指令进行一些简单的操作。背景颜色什么的。
好点，尽管该指令中有很多我不需要的功能。我已经回答了我的想法；基本上使用 $broadcast。

标签： angularjs angularjs-directive

【解决方案1】：

我最终使用了来自父控制器的 $broadcast。扩展指令要求父控制器广播一个collapseChange事件，所有指令都在监听。

父控制器

$scope.broadcastCollapseChange = function (id) {
        $scope.$broadcast('collapseChange', { 'id': id});
    };

指令

            scope.collapsed = true;
            var onCollapseChange = function (v) {
                if (scope.collapsed == false)
                    scope.$parent.broadcastCollapseChange(scope.$id);
            }
            scope.$watch('collapsed', onCollapseChange);

            scope.$on('collapseChange', function (event, args) {
                if (scope.collapsed == false && args.id != scope.$id)
                    scope.collapsed = true;
            });

目前我必须在指令中使用 $parent 来获取父控制器，这不是很优雅。有什么办法可以解决这个问题吗？

【讨论】：