Cara yang benar untuk mengintegrasikan plugin jQuery di AngularJS

217

Saya bertanya-tanya apa cara yang benar untuk mengintegrasikan plugin jQuery ke aplikasi sudut saya. Saya telah menemukan beberapa tutorial dan layar-gips tetapi tampaknya melayani plugin tertentu.

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

Haruskah saya membuat arahan seperti itu -

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

Dan kemudian di html memanggil skrip dan arahan?

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

Terima kasih sebelumnya

jquery-plugins angularjs

— Gidon
sumber

ya, pendekatan terbaik adalah dengan membungkus plugin jQuery yang diperlukan di dalam arahan, sehingga Anda mendapatkan manfaat dari variabel lingkup & mengontrol inisialisasi / metode invokation.

— Bhaskara Kempaiah

Saya tidak tahu bagaimana perasaan saya tentang eval dalam keadaan apa pun ... mendengar praktik buruknya

— sksallaj

Itu harus $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));tanpa tanda kutip.

— Maxim Zubarev

Jawaban:

143

Ya kamu benar. Jika Anda menggunakan plugin jQuery, jangan masukkan kode di controller. Alih-alih buat direktif dan masukkan kode yang biasanya Anda miliki di dalam linkfungsi direktif.

Ada beberapa poin dalam dokumentasi yang bisa Anda lihat. Anda dapat menemukannya di sini:
Masalah Umum

Menggunakan pengontrol dengan benar

Pastikan bahwa ketika Anda mereferensikan skrip dalam tampilan Anda, Anda merujuk terakhir - setelah perpustakaan sudut, pengontrol, layanan, dan filter direferensikan.

EDIT: Daripada menggunakan $(element), Anda bisa memanfaatkan angular.element(element)saat menggunakan AngularJS dengan jQuery

— callmekatootie
sumber

Bagaimana dengan parameter plugin jQuery yang memungkinkan konten HTML? (misalnya jika saya ingin menambahkan ng-clickarahan melalui parameter HTML teks biasa ini)

— Fractaliste

@Fractaliste Tidak yakin apa yang Anda maksud. Bisakah Anda memberi contoh?

— callmekatootie

dapatkah Anda menjelaskan apa yang sebenarnya dilakukan semua $ (elemen). 'pluginActivationFunction' (lingkup. $ eval (attrs.directiveName)); artinya?

— Gaurav_soni

Saya hampir total pemula dari angularjs. Saya mencoba menggunakan beberapa plugin jquery dan tidak ada yang berhasil. Apakah kita benar-benar perlu melakukan ini? Tidak bisakah mereka bekerja bersama angular? Kedengarannya sangat sederhana bagi saya.

— Moebius

Mengapa skrip perlu bertahan?

— Mike R

Saya memiliki 2 situasi di mana arahan dan layanan / pabrik tidak bermain dengan baik.

Skenarionya adalah bahwa saya telah (memiliki) arahan yang memiliki injeksi ketergantungan layanan, dan dari arahan saya meminta layanan untuk membuat panggilan ajax (dengan $ http).

pada akhirnya, dalam kedua kasus ng-Ulangi tidak mengajukan sama sekali, bahkan ketika saya memberi array nilai awal.

Saya bahkan mencoba membuat arahan dengan pengontrol dan ruang lingkup terisolasi

hanya ketika saya memindahkan semuanya ke controller dan itu bekerja seperti sulap.

contoh tentang ini di sini Menginisialisasi plugin jQuery (RoyalSlider) di Angular JS

— bresleveloper
sumber