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

问题描述

我想做一件简单的事情:

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

使用 jquery 很容易:

$('some-class').style('display','none')//这里是伪代码

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

这样做的具体原因:

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

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

解决方案

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

为toggleDisplay制定如下指令

app.directive('toggleDisplay', function() {返回函数(范围，元素){element.bind('点击', function() {element.toggleClass('不需要的类');//或者是其他东西});};});

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

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

<块引用>

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

假设你有一个打开/显示的 div，当你在它外面点击时你想隐藏它.给它一个divvy"类并将以下指令附加到它的包装容器:

 app.directive('toggleFocus', function() {返回函数(范围，元素){element.bind('点击', function() {if(!element.hasClass('divvy'))angular.element(document.querySelector('.divvy')).css({display:'none'})});};});

html:

<div class="divvy"></div>

I want to do a simple thing:

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).

This is easy using jquery:

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

How should i do the same with angular js?

A specific reason to do so:

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.

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:

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
    });
  };
});

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?

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屋！