Bir yönergeyi tanımlarken 'denetleyici', 'bağlantı' ve 'derleme' işlevleri arasındaki fark

Bazı yerler yönerge mantığı için kontrolör fonksiyonunu kullanırken bazıları bağlantı kullanır. Açısal ana sayfadaki sekmeler örneği, biri için denetleyici ve başka bir yönerge için bağlantı kullanır. İkisi arasındaki fark nedir?

Sorunuzu biraz genişleteceğim ve derleme işlevini de ekleyeceğim.

• derleme işlevi - şablon DOM manipülasyonu için kullanın (yani, tElement = şablon elemanının manipülasyonu), dolayısıyla yönerge ile ilişkili şablonun tüm DOM klonlarına uygulanan manipülasyonlar. (Ayrıca bir bağlantı işlevine (veya bağlantı öncesi ve sonrası işlevlerine) ihtiyacınız varsa ve bir derleme işlevi tanımladıysanız 'link', 'compile'öznitelik tanımlanmışsa öznitelik yok sayıldığı için derleme işlevi bağlantı işlevlerini döndürmelidir .)

• link işlevi - normalde dinleyicinin geri çağrılarını (örn $watch., kapsamdaki ifadeleri) kaydetmek ve DOM'u güncellemek (yani iElement = bireysel örnek öğesinin manipülasyonu) için kullanın. Şablon klonlandıktan sonra yürütülür. Örneğin, an içinde <li ng-repeat...>, bağlantı işlevi, <li>şablon (tElement) belirli bir <li>öğe için klonlandıktan (iElement'e) sonra yürütülür . A $watch, yönerge kapsam özelliği değişikliklerinin bildirilmesine izin verir (kapsam her örnekle ilişkilendirilir), bu yönerge DOM için güncellenmiş örnek değeri oluşturmaya izin verir.

• denetleyici işlevi - başka bir direktifin bu direktifle etkileşime girmesi gerektiğinde kullanılmalıdır. Örneğin, AngularJS ana sayfasında, bölme yönergesinin kendisini sekmeler yönergesi tarafından korunan kapsama eklemesi gerekir, bu nedenle sekmeler yönergesinin bölme yönergesinin erişebileceği / çağırabileceği bir denetleyici yöntemi (think API) tanımlaması gerekir.
  
  Sekmeler ve bölme yönergelerine ilişkin daha ayrıntılı bir açıklama ve sekmeler yönergesinin neden denetleyicisinde this(açık değil $scope) kullanarak bir işlev oluşturduğunu görmek için lütfen bu 'AngularJS denetleyicilerinde' bu 'vs $ kapsamına bakın .

Genel olarak, $watchesdirektifin denetleyicisine veya bağlantı işlevine yöntemler vb. Koyabilirsiniz. Denetleyici önce çalışır, bu bazen önemlidir ( ctrl ve link işlevleri iki iç içe yönerge ile çalıştığında günlüğe kaydedilen bu kemana bakın ). Josh belirtildiği gibi açıklama , sen çerçevenin kalanı ile sadece tutarlılık için bir denetleyici içinde kapsam-manipülasyon fonksiyonlarını koymak isteyebilirsiniz.

Mark'ın cevabını tamamlayıcı olarak, derleme fonksiyonunun kapsama erişimi yok, ancak link fonksiyonu var.

Bu videoyu gerçekten tavsiye ediyorum; Farklılıkları ve bazı teknikleri tanımladığı Misko Hevery'nin (AngularJS'nin babası) Yazma Direktifleri . (Derleme işlevi ile videodaki 14:41 işaretindeki bağlantı işlevi arasındaki fark ).

1. Derleme öncesi çalışan kod: kontrolör kullanın
2. Derleme Sonrası Çalışan Kod: Bağlantıyı Kullan

Açısal konvansiyon: kontrolörde iş mantığı ve bağlantıda DOM manipülasyonu yazın.

Bunun dışında başka bir direktifin link fonksiyonundan bir kontrolör fonksiyonunu çağırabilirsiniz. Örneğin 3 özel direktifiniz var

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

ve "leopar" direktifinin içinden hayvana erişmek istiyorsunuz.

http://egghead.io/lessons/angularjs-directive-communication , direktifler arası iletişim hakkında bilmekte yardımcı olacaktır

derleme işlevi -

1. denetleyici ve bağlantı işlevinden önce çağrılır.
2. Derleme işlevinde, orijinal DOM şablonunuz vardır, böylece AngularJS bunun bir örneğini oluşturmadan ve bir kapsam oluşturulmadan önce orijinal DOM üzerinde değişiklikler yapabilirsiniz
3. ng-repeat mükemmel bir örnektir - orijinal sözdizimi şablon öğedir, HTML'de tekrarlanan öğeler örneklerdir
4. Birden çok öğe örneği ve yalnızca bir şablon öğesi olabilir
5. Kapsam henüz mevcut değil
6. Derleme işlevi işlevi ve nesneyi döndürebilir
7. (bağlantı sonrası) işlevinin döndürülmesi - derleme işlevi boş olduğunda, bağlama işlevinin config nesnesinin link özelliği aracılığıyla kaydedilmesine eşdeğerdir.
8. pre ve post özellikleri aracılığıyla kaydedilmiş fonksiyon (lar) a sahip bir nesneyi döndürme - bağlama aşamasında bir bağlama fonksiyonunun ne zaman çağrılması gerektiğini kontrol etmenizi sağlar. Ön bağlantı ve bağlantı sonrası işlevleri hakkında aşağıdaki bilgilere bakın.

sözdizimi

function compile(tElement, tAttrs, transclude) { ... }

kontrolör

1. derleme fonksiyonundan sonra çağırılır
2. kapsamı burada bulabilirsiniz
3. diğer direktiflerle erişilebilir (bkz. öznitelik gerekir)

ön bağlantı

1. Link işlevi DOM dinleyicilerini kaydetmekten ve DOM'u güncellemekten sorumludur. Şablon klonlandıktan sonra yürütülür. Direktif mantığının çoğu burada konacaktır.

2. Denetleyicideki dom'u açısal.element kullanarak güncelleyebilirsiniz, ancak öğe bağlantı işlevinde sağlandığından bu önerilmez

3. Ön bağlantı işlevi, açısal js alt öğeleri derlediğinde, ancak alt öğenin posta bağlantılarından herhangi biri çağrılmadan önce çalışan mantığı uygulamak için kullanılır

Post-bağlantı

1. sadece link fonksiyonuna sahip direktif, açısal fonksiyonu bir post link olarak ele alır

2. post derleme, denetleyici ve ön bağlantı funciton sonra yürütülecektir, bu yüzden bu yönerge mantık eklemek için en güvenli ve varsayılan yer olarak kabul edilir