javascript - AngularJS - 伝播停止

Question

stopPropagation の実装に本当に苦労しています。現在、複数のドロップダウンメニューを使用しています。メニューを開いてその外側をクリックすると、メニューがオフになるように設定したいと思います。理想的には、一度に 1 つのメニューのみを開く必要があるため、1 つのメニューを開いて別のメニューをクリックすると、最初のメニューがオフになります。

おそらく、私は完全に間違った方法でこれに取り組んでいます。もしそうなら、正しい方向にうなずいていただければ幸いです！

ありがとう！

ドロップメニューの開閉を処理する方法は次のとおりです。

<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #1</a>
<ul ng-show="popout.isVisible">
    <li>This is some text.</li>
    <li>This is some text.</li>
    <li>This is some text.</li>
</ul>

<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #2</a>
<ul ng-show="popout.isVisible">
    <li>This is some text.</li>
    <li>This is some text.</li>
    <li>This is some text.</li>
</ul>

これは、stopEvent ディレクティブを作成していることがわかったコードですが、必要な方法で機能していません。

myApp.directive('stopEvent', function () {
  return {
    link: function (scope, element, attr) {
      element.bind(attr.stopEvent, function (e) {
          e.stopPropagation();
          alert('ALERT!');
      });
    }
  };
});