jQuery và AngularJS không hoạt động cùng nhau

Question

Tôi đang sử dụng RequireJS và Angular nhưng chúng không hoạt động cùng nhau trong thiết lập của tôi. Mọi thứ hoạt động tốt khi phiên bản jQuery là 1.7.2. Tuy nhiên tôi muốn sử dụng jQuery 1.8.1 và jQuery UI và ứng dụng góc thậm chí không khởi tạo được mô-đun chính của tôi với điều này.

Đây là vấn đề:

Biến số phân biệt chữ hoa chữ thường: jQuery và jquery. Trong mã nguồn jquery 1.8.1, về phía cuối chúng đã định nghĩa window.jQuery. Trong phiên bản trước đó, phiên bản 1.7.2 đã xác định window.jquery.

Vì tôi muốn sử dụng giao diện người dùng jQuery trong ứng dụng của tôi, bao gồm tệp jquery-ui-1.8.23.custom.min.js. Sau khi bao gồm nó tôi đã nhận được lỗi rằng "jQuery" là không xác định.

Vì vậy, tôi quyết định nâng cấp phiên bản jQuery của mình và tải xuống phiên bản 1.8.1 đã nói. Đến cuối mã nguồn jQuery tôi có thể thấy rằng phiên bản này được định nghĩa window.jQuery (trường hợp chính xác khi cần bởi jQuery UI).

Tôi đã cập nhật JS yêu cầu của mình với phiên bản mới nhất từ ​​dự án James Burke github và cập nhật nó bằng jquery 1.8.1.

Nhưng bao gồm dự án jQuery/RequireJS đã cập nhật, angularjs đã ngừng hoạt động.

tôi nhận được lỗi này trong Chrome console:

Nếu tôi trở lại 1.7.2 công trình góc. Hoặc nếu tôi chỉnh sửa tệp jQuery để định nghĩa window.jquery thay vì window.jQuery (lưu ý trường hợp) nó lại hoạt động. Nhưng điều đó có nghĩa là giao diện người dùng jQuery sẽ không.

Answer 1

Tôi đã khắc phục giải pháp này bằng cách xóa dòng khỏi nguồn jQuery, biến $ và jQuery thành các biến toàn cầu. Dòng này trông giống như window.jQuery = window.$ = jQuery.

Nếu bạn cũng đang sử dụng AngularJS với RequireJS và đang đối mặt với vấn đề tương tự, hãy xóa các dòng này.

Ngoài ra, bạn sẽ phải sử dụng jqueryui-amd trong dự án của mình. Tải xuống tiện ích từ trang Github và nó sẽ chuyển đổi tập lệnh jQuery UI thành các mô-đun AMD.

Sử dụng tính năng AngularJS được gọi là 'chỉ thị' để mở rộng các phần tử HTML Tôi đã có thể sử dụng các thành phần giao diện người dùng jQuery theo cách tái sử dụng và sane.

Tôi đã nói rằng tôi đã ghét và yêu AngularJS trong khi làm việc trong dự án của mình, đôi khi thậm chí cho phép mọi người trên Twitter biết rằng tôi ghét AngularJS. Tuy nhiên, sau khi thực hiện và hoàn thành hai dự án trong tháng trước, tôi có ý tưởng khá tốt về thời điểm sử dụng và khi không sử dụng nó.

Dưới đây là một jsFiddle tôi đã tạo ra để chứng minh việc sử dụng jQuery UI với AngularJS:

http://jsfiddle.net/samunplugged/gMyfE/2/

Answer 2

Sử dụng phương pháp noConflict của jQuery là một giải pháp chứng minh thanh lịch và tương lai hơn cho vấn đề này.

Xem tài liệu phong phú trên http://api.jquery.com/jQuery.noConflict/

UPDATE (ví dụ từ liên kết):

<script> 
$.noConflict(); 
jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
}); 
// Code that uses other library's $ can follow here. 
</script> 

Answer 3

Dễ dàng cố định này sau hai ngày tôi cố gắng ..

Khi thử

Bao gồm các tệp Slider Jquery cụ thể tới view.html trực tiếp. xóa jquery khỏi tệp index.html