隐藏具有相同类的所有特定div的角度方式是什么

Question

我想做一件简单的事:

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

使用jquery很容易:

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

我应该如何对角度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>

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

我如何在应用程序的任何地方收听点击,当我点击它并且"那个"元素不是选择框时,关闭所有选择框？

假设您在外部单击时要隐藏的那个opend/dispalyed 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>