AngularJS'ye jQuery eklentilerini entegre etmenin doğru yolu

217

Açısal uygulamama jQuery eklentilerini entegre etmenin doğru yolunun ne olduğunu merak ediyordum. Birkaç öğreticiler ve ekran yayınları buldum ama belirli bir eklentiye yiyecek ve içecek gibi görünüyorlar.

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

Böyle bir direktif oluşturmalı mıyım -

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

Ve sonra html'de komut dosyasını ve yönergeyi çağırın?

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

Teşekkürler

jquery-plugins angularjs

— Gidon
kaynak

evet, en iyi yaklaşım, gerekli jQuery eklentisini bir yönerge içine sarmaktır, böylece kapsam değişkenlerinden faydalanır ve başlatma / yöntem çağrısını kontrol edersiniz.

— Bhaskara Kempaiah

Duyduğum ... her koşulda eval hakkında onun sadece kötü uygulama nasıl hissettiğini bilmiyorum

— sksallaj

$(element).pluginActivationFunction(scope.$eval(attrs.directiveName));Tırnak işaretleri olmadan olmalı .

— Maxim Zubarev

Yanıtlar:

143

Evet haklısın. Bir jQuery eklentisi kullanıyorsanız, kodu denetleyiciye koymayın. Bunun yerine bir yönerge oluşturun ve normalde sahip olacağınız kodu linkyönerge fonksiyonunun içine yerleştirin .

Belgelere göz atabileceğiniz birkaç nokta var. Onları burada bulabilirsiniz:
Ortak Tuzaklar

Denetleyicileri doğru kullanma

Komut dosyasını görünümünüzde referans alırken, en son başvurduğunuzdan emin olun - angularjs kitaplığına, denetleyicilere, hizmetlere ve filtrelere başvurulduktan sonra.

EDIT: jQuery ile AngularJS kullanırken $(element)kullanmak yerine , kullanabilirsinizangular.element(element)

— callmekatootie
kaynak

HTML içeriğine izin veren jQuery eklentilerinin parametrelerine ne dersiniz? (örneğin ng-click, bu düz metin HTML parametresi aracılığıyla bir yönerge eklemek istersem )

— Fractaliste

@Fractaliste Ne demek istediğinizden emin değilim. Bir örnek verebilir misin?

— callmekatootie

$ (element) 'in tam olarak ne yaptığını açıklayabilir misiniz.' pluginActivationFunction '(kapsam. $ eval (attrs.directiveName)); anlamına geliyor ?

— Gaurav_soni

Neredeyse tamamen açısal bir acemi. Birkaç jquery eklentisi kullanmaya çalıştım ve hiçbiri işe yaramadı. Bunu gerçekten yapmamız gerekiyor mu? Onlar sadece açısallar boyunca çalışamazlar mı? Bana öyle saçma geliyor ki.

— Moebius

Komut dosyasının neden son gelmesi gerekiyor?

— Mike R

Ben direktifler ve hizmetler / fabrikalar iyi oynamadı alreay 2 durumlar var.

senaryo, ben bir hizmet bağımlılığı enjeksiyon olan bir yönerge vardı (ve) direktiften ben ($ http ile) bir ajax çağrı yapmak için hizmet isteyin.

sonunda, her iki durumda da ben diziye bir başlangıç değeri verdi bile ng-Repeat hiç dosya vermedi.

hatta bir kontrolör ve yalıtılmış bir kapsam ile bir direktif yapmaya çalıştım

sadece her şeyi bir denetleyiciye taşıdığımda ve sihir gibi çalıştığımda.

bununla ilgili örnek burada Angular JS'de jQuery eklentisini (RoyalSlider) başlatma

— bresleveloper
kaynak