jQuery 및 AngularJS : DOM 변경시 이벤트 바인딩하기

Question

AngularJS의 DOM에서 ng-repeat 지시문 안에 ng-include를 사용하고 있습니다. 그것은 HTML을 잘로드 중입니다. 어쨌든, 내가 가지고있는 문제는 ng-repeat와 include에 의해 DOM에 추가 된 것과 같은 클래스로 DOM의 요소에 대해 마우스 몇 개를 클릭하고 마우스 클릭 이벤트를 바인딩하기 위해 JQuery (최신 버전)를 사용하고 있다는 것입니다. JQuery는 새로운 DOM 추가에 이벤트 처리기를 적용하는 것처럼 보이지 않습니다.

이전 버전에서는 .live()가 원하는대로 처리되었지만 최신 버전에서는 제거되었습니다. 클래스의 추가 요소가 DOM에 추가 될 때마다 요소의 바인딩을 지우고 다시 바인딩해야합니까?

Answer 1

답변 :

이 다각적 인 질문이다. 우선, 모든 jQuery 코드 이벤트는 $ scope를 사용해야합니다. $ angleJs 코드를 예상대로 실행하려면 apply를 사용합니다. 예 :

<div class="myDiv"> 
<div class="myDynamicDiv"> 
</div> 
<!-- Expect that more "myDynamicDiv" will be added here --> 
</div> 

: jQuery를 최신 버전에서

jQuery(selector).someEvent(function(){ 
    $scope.$apply(function(){ 
     // perform any model changes or method invocations here on angular app. 
    }); 
}); 

, 순서는 DOM이 변경으로 업데이트되는 이벤트를 가지고, 당신은 가장 가까운 부모 요소의 선택 (예)를 가져 오기 1. 원하는

이 경우 부모 선택기는 ".myDiv"이고 자식 선택기는 .myDynamicDiv입니다. .

은 $이 (적용

$('.myDiv').on("click", ".myDynamicDiv", function(e){ 
     $(this).slideToggle(500); 
     $scope.$apply(function(){ 
      $scope.myAngularVariable = !$scope.myAngularVariable; 
     }); 
}); 

공지하는 $ 범위 사용) :

따라서, 당신은 자식 요소를 변경하는 경우, 그것은 여전히 ​​작동 할 수 있도록 jQuery를이 요소의 부모에 이벤트를 갖고 싶어 jQuery가 이러한 각도 변수에 액세스 할 수있게합니다.

희망이 도움이됩니다. 기독교

Answer 2

면책 조항 : 본인은 각성을 배웠으므로 기본적으로 반쯤은 추측 된 것입니다.

먼저 Bertrand 및 Mark에서 설명한대로 작업에 각도 지시문을 사용하는 것이 좋습니다.

둘째, jquery가 각도로 표시되기 전에로드되는지 확인하십시오 (here 참조).

셋째, 동적 바인딩 문제 일 수 있습니다 (here 참조).

의견을 보내주십시오. 여기

Answer 3

이 질문에 대해서는 Christian Stewart가 이미 답변 해주었습니다.

나는 다음과 같은 코드를 사용하고 사용자가 버튼 (또는 div 제어)를 클릭 할 때, 그것은 은 안쪽으로 약간을 축소, 그래서 내 버튼에 "cssClickableIcon"클래스를 추가 할 수 있습니다.

그것은 약간의 비틀기,하지만 웹 페이지에 정말 좋은 효과가 있습니다. 웹 페이지가 평평하지 않고 상호 작용이 더 많은 것 같고, 에이 있습니다.

// Make the buttons "bounce" when they're clicked on 
$('body').on("mousedown", ".cssClickableIcon", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".cssClickableIcon", function (e) { 
    $(this).css("transform", ""); 
}); 

이 on jQuery의 함수를 사용하기 때문에

이 는 버튼 또는 AngularJS와 ng-repeat 명령에 의해 작성된 다른 DOM 요소 일을한다. 당신은 부트 스트랩 자체의 버튼 CSS 클래스를 사용하는 경우, 당신은 쉽게 부트 스트랩의 모든 걸쳐이 효과를 추가 할 수 있습니다 물론

그리고,/각도 버튼이 사용 : 내가 너무 많은이 효과를 사랑

$('body').on("mousedown", ".btn", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".btn", function (e) { 
    $(this).css("transform", ""); 
}); 

, 그리고 그것을 추가하는 것은 아주 간단합니다!

.btn:active { 
    transform: scale(0.9); 
} 

:

업데이트

기독교 스튜어트 대신의 jQuery CSS를 사용하여 제안, 그가 절대적으로 바로 ...

그래서, 당신은이 간단한 CSS를 사용하여 동일한 효과를 얻을 수 있습니다