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

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>

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

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

假设您有一个打开/显示的 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>

Answer 2

在 Angular 文档中：https://docs.angularjs.org/api/ng/directive/ngShow

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

只需根据“whateverValue”是否为真/假，将 ng-show="whateverValue" 附加到您要隐藏/显示的每个 div