AngularJS : 특정 클래스가있는 div를 클릭하십시오.

Question

JavaScript 코드를 실행하고 싶습니다. 사용자가 AngularJS 응용 프로그램 내에서 특수 클래스가있는 요소를 클릭하면 간단한 alert() 함수가 실행됩니다. 나는 간단한 jQuery를 사용한다면, 나는 그런 식으로 할 것 :

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

이것은 내가 내 index.html에 포함했다 main.js 파일이 정확히 무엇이다. 심지어는 실제로 작동하는 코드가 여러 개 있습니다 ($(document).on('click',...). 그러나 $('.specialClass').on('click'... 부분이 작동하지 않습니다. 나도 실제로이 클래스를 구현하는 방법을 모르겠다 specialClass 다른보기, 컨트롤러, 지시문 등 모든 곳에서 발생할 수 있습니다 기본적으로 애플 리케이션에서 사방. 어떤 아이디어이 문제에 접근하는 방법?

Answer 1

는 매개 변수 참고로 클래스를 추가 & 문서에 대해 사용 http://api.jquery.com/on/

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

편집을 다음 DownVoters하십시오.

이 각 방식이 아니라 모든 요소

Answer 2

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를 반환합니다.