Cách chính xác để tích hợp các plugin jQuery trong AngularJS


217

Tôi đã tự hỏi đâu là cách chính xác để tích hợp các plugin jQuery vào ứng dụng góc cạnh của tôi. Tôi đã tìm thấy một số hướng dẫn và diễn viên màn hình nhưng chúng dường như phục vụ cho một plugin cụ thể.

Ví dụ: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

Tôi có nên tạo một chỉ thị như vậy -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
}); 

Và sau đó trong html gọi script và chỉ thị?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

Cảm ơn trước


4
có, cách tiếp cận tốt nhất là bao bọc các plugin jQuery cần thiết trong một lệnh, để bạn có được lợi ích của các biến phạm vi và kiểm soát việc khởi tạo / gọi phương thức.
Bhaskara Kempaiah

Tôi không biết tôi cảm thấy thế nào về eval trong bất kỳ hoàn cảnh nào ... nghe nói đó chỉ là một thực tế tồi tệ
sksallaj

1
Nó sẽ $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));không có dấu ngoặc kép.
Maxim Zubarev

Câu trả lời:


143

Ư, bạn đung. Nếu bạn đang sử dụng plugin jQuery, đừng đặt mã vào bộ điều khiển. Thay vào đó hãy tạo một lệnh và đặt mã mà bạn thường có bên trong linkchức năng của lệnh.

Có một vài điểm trong tài liệu mà bạn có thể xem qua. Bạn có thể tìm thấy chúng ở đây:
Cạm bẫy phổ biến

Sử dụng bộ điều khiển chính xác

Đảm bảo rằng khi bạn đang tham chiếu tập lệnh trong chế độ xem của mình, bạn sẽ giới thiệu tập lệnh cuối cùng - sau khi thư viện angularjs, bộ điều khiển, dịch vụ và bộ lọc được tham chiếu.

EDIT: Thay vì sử dụng $(element), bạn có thể sử dụng angular.element(element)khi sử dụng AngularJS với jQuery


1
Làm thế nào về các tham số của plugin jQuery cho phép nội dung HTML? (ví dụ: nếu tôi muốn thêm một lệnh ng-clickthông qua tham số HTML văn bản đơn giản này)
Fractaliste

1
@Fractaliste Không chắc ý của bạn là gì. Bạn có thể đưa ra một ví dụ không?
callmekatootie

bạn có thể giải thích chính xác những gì tất cả $ (phần tử). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); có nghĩa ?
Gaurav_soni

Tôi gần như là một người mới của angularjs. Tôi đã cố gắng sử dụng một số plugin jquery và không ai trong số họ làm việc. Chúng ta có thực sự cần phải làm điều này? Họ không thể làm việc dọc theo angularjs? Nghe có vẻ rất sôi nổi với tôi.
Moebius

Tại sao kịch bản cần phải đến cuối cùng?
Mike R

0

Tôi có rất nhiều tình huống trong đó các chỉ thị và dịch vụ / nhà máy không chơi tốt.

kịch bản là tôi có (đã) có một lệnh tiêm phụ thuộc vào dịch vụ và từ lệnh tôi yêu cầu dịch vụ thực hiện cuộc gọi ajax (với $ http).

cuối cùng, trong cả hai trường hợp, ng-Lặp lại không tập tin, ngay cả khi tôi đã cho mảng một giá trị ban đầu.

tôi thậm chí đã cố gắng thực hiện một lệnh với bộ điều khiển và phạm vi cách ly

Chỉ khi tôi chuyển mọi thứ sang một bộ điều khiển và nó hoạt động như ma thuật.

ví dụ về điều này ở đây Khởi tạo plugin jQuery (RoyalSlider) trong Angular JS

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.