在一个页面中多次使用 angularjs dropDown 指令，如何在单击另一个指令并获取该特定值时关闭指令答案

【问题标题】：Using angularjs dropDown directive multiple times in a page, How to close directive when click of another and getting values of that particular在一个页面中多次使用 angularjs dropDown 指令，如何在单击另一个指令并获取该特定值时关闭指令
【发布时间】：2017-12-13 13:52:40
【问题描述】：

我对 Angular 非常陌生。制作一个下拉指令，用于在我的网站列表中的每个条目上选择项目。好吧，我才刚刚开始。

app.directive('dropDown', function () {
    return {
        restrict: 'AE',
        scope: {},
        template: '<div class="btn-group">\n' +
        '     <button type="button" class="btn btn-sm btn-custom btn-default" ng-click="btnClick()"> Hey'+
        '     </button>' +
        '       <div ng-show="divFlag">' +
        '           Directive Content' +
        '       </div> ' +
        ' </div>'link: function ($scope, elem, attr) {
            $scope.divFlag = false;
            $scope.btnClick = function () {
                $scope.divFlag = !$scope.divFlag;
            }
        }
    };
});

有了这个，当我点击一个按钮时，它会显示<div>，但是当点击另一个时，第一个不会崩溃，第二个显示。虽然我的网站会包含很多这样的内容，但我现在只使用了两个。

<drop-down></drop-down>
<drop-down></drop-down>

我希望他们当时只扩展一个。单击另一个，展开的必须折叠。请帮帮我。这对我来说很尴尬。

【问题讨论】：

标签： angularjs angular-directive

【解决方案1】：

它们处于新的和隔离的范围内，这意味着每个指令都可以独立工作。您需要在指令之间共享某些内容以控制何时显示和隐藏。

您需要编写一个父指令来控制显示和隐藏的内容。 Child 指令不承担隐藏/显示其兄弟姐妹的责任。

1) 查看指令继承 2) 创建一个带有显示/隐藏功能的父指令，通过子指令访问 3）点击父指令设置该子指令上的某些属性以显示/隐藏然后在其他指令上调用oppoosite（未单击，某种循环设置所有隐藏和一个显示）

我不会写代码，因为你正在学习，但如果你不明白，创建一个 plunker，我会用工作代码更新它。

同样可以在没有父指令的情况下完成，只需使用带有函数显示/隐藏的控制器，该函数循环遍历子属性并设置显示/隐藏。

【讨论】：