隐藏具有相同类的所有特定div的角度方式是什么 [英] What is the angular way of hiding all specific divs with the same class

问题描述

我想做一件简单的事情:

I want to do a simple thing:

我有一个应用程序，该应用程序具有某些div，需要单击它才能显示(只有特定的div)，如果单击它之外的某个地方，则隐藏它们(例如，全部包含特定的类).

I have an app, which has certain divs that in need to show (Only the specific one) and hide if clicked somewhere outside of it (All with the specific class for example).

使用jquery很容易:

This is easy using jquery:

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

我应该如何用angular js做同样的事情?

How should i do the same with angular js?

这样做的特定原因:

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

I want to build a simple select drop-down (I don't want to use one that exist, i want to understand this...), when i click one, it suppose to open a div right beneath the button, when i click outside of it, it suppose to close not only this one, but some other elements like it in the app.

值得一提的是:并不是我所有的选择框都是预先渲染的，有些是动态添加的(在指令内部)，所以并不是所有的选择框都在$ scope中，而是在它们的内部具有独立作用域的指令.

one point worth mentioning: Not all my select boxes are pre-rendered, some are dynamically added (inside directive), so not all of the are in the $scope, but inside them directives which has isolated scope.

推荐答案

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

Its better to make directives for these kind of things:

为toggleDisplay设置指令，如下所示:

Make a directive for toggleDisplay as following

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

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

and then you can apply this directive to any element in the html:

<div toggle-display></div>

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

You can make a drop down logic or kindof accordion etc following this pattern

我如何在应用程序中的任何位置收听点击，当我单击它时 并且那个"元素不是选择框，请关闭所有选择框?

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"类，并将以下指令附加到其包装容器中:

let suppose you have that opend/dispalyed div that you want to hide when you click outside of it . give it a class "divvy" and attach the following directive to its wrapping container:

 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>

这篇关于隐藏具有相同类的所有特定div的角度方式是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！