anglejsのdropDownディレクティブをページ内で複数回使用すると、別のディレクティブをクリックして特定の値を取得したときにディレクティブを閉じる方法

Question

私は非常に新しい角度です。私のウェブサイトのリストにあるすべてのエントリのプロジェクトを選択するdropDownディレクティブを作成します。まあ、私はちょうど始めた。これで

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>が表示されますが、別のをクリックすると、最初のものは、まだ第二のショーを崩壊を得ることはありません。私のウェブサイトにはこのようなものがたくさん含まれていますが、今は2つしか使用していません。

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

私はそれらを一度に1つだけ拡張します。別のクリックで、拡大されたものは崩壊する必要があります。私を助けてください。これは私にとって厄介なことです。

Answer 1

これらは新しく隔離されたスコープの下にあります。これは、各指令が単独で機能することを意味します。 表示と非表示を制御するために、ディレクティブ間で何かを共有する必要があります。

表示および非表示を制御する親ディレクティブを作成する必要があります。子供の指示は、その兄弟を隠す/表示する責任を負いません。

1）指令の継承 2）クリック親ディレクティブの子 3）を介してアクセスされている表示/非表示機能を持つ親のディレクティブを作成するに見ては、表示/非表示を切り替えその子ディレクティブのいくつかのプロパティを設定し、他の上oppoositeを呼び出しますディレクティブ（クリックされていないもの、非表示のものと表示するものの両方を設定するループ）

学習しているのでコードは書いていませんが、それを理解できない場合はプランナーを作成しますそれを作業コードで更新してください。

親ディレクティブを使用せずに、単に子プロパティをループして表示/非表示を切り替えるshow/hide機能を備えたコントローラを使用することでも同じことができます。