jQuery và AngularJS: Ràng buộc các sự kiện để thay đổi DOM

Question

Trong DOM của tôi trong AngularJS, tôi đang sử dụng ng-include bên trong một chỉ thị ng-repeat. Nó đang tải HTML tốt. Dù sao, một vấn đề tôi có là tôi đang sử dụng JQuery (phiên bản mới nhất) để ràng buộc một vài chuột và các sự kiện click chuột trên các phần tử trong DOM với cùng lớp như những phần được thêm vào DOM bởi ng-repeat và include. Tuy nhiên, JQuery dường như không áp dụng các trình xử lý sự kiện cho phần bổ sung DOM mới.

Trong các phiên bản trước .live() dường như làm những gì tôi muốn nhưng đã bị xóa trong phiên bản mới nhất. Tôi có nên xóa các ràng buộc trên các phần tử và tái tạo chúng mỗi lần DOM có thêm các phần tử của lớp được thêm vào không?

Answer 1

Trả lời tại đây:

Đây là câu hỏi nhiều mặt. Trước hết, tất cả các sự kiện mã jQuery nên sử dụng phạm vi $. $ Áp dụng để thực thi mã angularjs như mong đợi. Ví dụ:

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

Trong phiên bản mới nhất của jQuery, để có sự kiện cập nhật dựa trên thay đổi DOM, bạn muốn 1. Nhận một bộ chọn cho yếu tố phụ huynh gần nhất (ex):

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

Trong trường hợp này, bộ chọn gốc của bạn sẽ là ".myDiv" và bộ chọn con của bạn sẽ là .myDynamicDiv.

Vì vậy, bạn muốn jQuery để có những sự kiện trên PHỤ HUYNH của nguyên tố này vì vậy nếu các phần tử con thay đổi, nó vẫn sẽ làm việc:.

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

Chú ý rằng $ phạm vi $ áp dụng() được sử dụng để cho phép jQuery truy cập các biến số góc đó.

Hy vọng điều này sẽ hữu ích! Christian

Answer 2

tuyên bố từ chối trách nhiệm: Tôi đã tự học về góc cạnh, vì vậy, đây chỉ là những dự đoán cơ bản chỉ là một nửa.

Trước tiên, hãy xem xét sử dụng chỉ thị góc cho công việc như đã nêu bởi Bertrand và Mark.

Thứ hai, hãy đảm bảo rằng jquery được nạp trước góc, xem here.

Thứ ba, đó có thể là vấn đề ràng buộc (động), xem here.

Vui lòng phản hồi.

Answer 3

Câu hỏi này đã được Christian Stewart trả lời độc đáo, nhưng tôi chỉ muốn thêm điều gì đó vào câu trả lời của anh ấy.

tôi sử dụng đoạn mã sau, và thêm các lớp "cssClickableIcon" để nút của tôi, để khi người dùng nhấp chuột vào một nút (hoặc một div điều khiển), nó co vào bên trong một chút.

Đó là một tinh chỉnh nhỏ, nhưng có tác dụng thật sự tốt đẹp trên một trang web. Bạn thực sự cảm thấy như thể trang web tương tác hơn, chứ không phải bằng phẳng và bạn có được nhấp vào điều khiển.

// 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", ""); 
}); 

Bởi vì đây sử dụng on chức năng của jQuery, này không làm việc với các nút hoặc các yếu tố DOM khác được tạo ra bởi một AngularJS ng-repeat lệnh.

Và, tất nhiên, nếu bạn đang sử dụng các lớp nút CSS riêng Bootstrap, bạn có thể dễ dàng thêm hiệu ứng này trên tất cả các Bootstrap của bạn/nút góc sử dụng này:

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

Tôi yêu hiệu ứng này rất nhiều và đó là một điều đơn giản để thêm vào!

Cập nhật

Christian Stewart đề nghị sử dụng CSS thay vì jQuery, và anh ấy hoàn toàn đúng ...

Vì vậy, bạn có thể đạt được hiệu quả tương tự chỉ sử dụng CSS đơn giản này:

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