javascript - 隐藏具有相同类的所有特定 div 的 Angular 方式是什么

Question

我想做一件简单的事:

我有一个应用程序，它有某些 div 需要显示(只有特定的一个)，如果在它之外的某个地方单击则隐藏(例如，所有具有特定类的)。

使用 jquery 很容易:

$('some-class').style('display','none') //psuedo code here

我应该如何对 angular js 做同样的事情？

这样做的具体原因:

我想构建一个简单的选择下拉列表(我不想使用现有的，我想了解这个...)，当我单击一个时，它应该会在按钮正下方打开一个 div ，当我点击它的外部时，它应该不仅关闭这个，而且关闭应用程序中类似的其他一些元素。

有一点值得一提:并非我所有的选择框都是预呈现的，有些是动态添加的(内部指令)，因此并非所有选择框都在 $scope 中，而是在它们内部具有隔离范围的指令。

Answer 1

最好为这类事情制定指令:

为 toggleDisplay 做一个指令如下

app.directive('toggleDisplay', function() {
  return function(scope, element) {
    element.bind('click', function() {
     element.toggleClass('unneeded-class'); // or something else
    });
  };
});

然后您可以将此指令应用于 html 中的任何元素:

<div toggle-display></div>

您可以按照此模式制作下拉逻辑或 Accordion 等

How do i listen to a click anywhere in the app, that when i click it and "that" element is not the select box, close all the select boxes?

假设您有一个打开/显示的 div，当您在其外部单击时想要隐藏它。给它一个类“divvy”并将以下指令附加到它的包装容器中:

 app.directive('toggleFocus', function() {
      return function(scope, element) {
        element.bind('click', function() {
         if(!element.hasClass('divvy'))
         angular.element(document.querySelector('.divvy')).css({display:'none'}) 
        });
      };
    });

html:

<div toggle-focus>
   <div class="divvy"></div>
</div>