Question

如果用户在我的AngularJS应用程序中点击带有特殊类的元素，我想执行一个JavaScript代码，假设是一个简单的alert()函数。如果我使用简单的jQuery，我会这样做：

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

这正是我main.js文件中包含的index.html文件。我甚至有几个$(document).on('click',...代码片段确实可以正常工作。但是，$('.specialClass').on('click'...部分不起作用。我不知道如何实际实现这一点，因为在应用程序中的各个地方，不同的视图，控制器，指令等中都可以遇到具有类specialClass的元素。任何想法如何处理这个问题？

Answer 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。

Answer 2

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

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

编辑：对于DownVoters。

这不是有角度的方式，但在您的情况下可以通过查找所有这些元素来创建这些指令的最小变化影响

AngularJS：处理单击某个类的div

2 个答案: