AngularJS：处理单击具有特定类的 div

Posted 2023-05-09

【中文标题】AngularJS：处理单击具有特定类的 div

【英文标题】：AngularJS: handle click on a div with certain class

【发布时间】：2016-11-23 14:44:20

【问题描述】：

如果用户在我的 AngularJS 应用程序中单击具有特殊类的元素，我想执行一个 javascript 代码，比如说一个简单的 alert() 函数。如果我要使用简单的 jQuery，我会这样做：

$('.specialClass').on('click', function()
    alert('hi');
);

这正是我在我的index.html 中包含的main.js 文件中的内容。我什至有几段$(document).on('click',... 确实有效的代码。但是，$('.specialClass').on('click'... 部分不起作用。我不知道如何实际实现这一点，因为类specialClass 的元素可以在不同的视图、控制器、指令等中随处可见，基本上在应用程序的任何地方。任何想法如何解决这个问题？

【参考方案1】：

angular.module('app', []).directive('clickable', function() 
  return 
    restrict: 'C',
    link: function(scope, elem, attrs) 
      elem.bind('click', function() 
        scope.$apply(function() 
          if ($(elem).is('div.clickable')) 
            alert('matches div.clickable');
           else 
            alert('does NOT matche div.clickable');
          
        );
      );
    
  
);

.black 
  color: black;

.blue 
  color: blue;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div class="black clickable">clickable black div</div>
  <div class="blue not-clickable">not clickable blue</div>
  <p class="blue clickable">clickable blue p</p>
</div>

如果你想要一种纯粹的角度方式，你可以创建一个指令，它可以通过类定义来应用。指令的名称将是您要添加点击的类的名称。

见上面的例子。

编辑：回复评论I'm targeting is actually a query looking something like that div .specialClass and I would only care for the clicks if it's within the div

JQuery 有一个名为 .is(selector) 的函数，可以应用于元素以查看它们是否满足给定的选择器。

因此，如果有一个元素是 <div class="special"></div> 执行 <elem>.is('div.special')，其中 <elem> 是任何具有特殊类的 div，则该函数将返回 true。

【讨论】：

很好的解决方案，但是如果我的目标类实际上是一个类似于div .specialClass 的查询，并且我只关心在 div 内的点击怎么办？当然，我可以添加另一个类并使用您的解决方案，但问题是该应用程序已经存在，因此我必须完成所有代码并添加该新类...

@mmvsbg 您可以使用 jquery 的 .is(selector) 函数。查看更新的答案。

【参考方案2】：

将 on 用于文档并将您的类添加为参数 参考： http://api.jquery.com/on/

$(document).on('click', '.specialClass', function ()  
//your code here..
    );

编辑：为 DownVoters。

这不是有角度的方式，但会在您的情况下工作，通过查找所有这些元素来创建这些指令的更改影响最小

【讨论】：

@HarshadHirapara 是的，它不是“有角度的”，但 op 已经在他的应用程序的很多地方使用它。

是的，同意，但我也没有要求具体的 AngularJS 解决方案。我只是想以某种方式处理点击，这个解决方案在我的情况下实际上可能更有效，尽管它不是有角度的方式。