Birkaç günlüğüne kafamı duvara dayayordum ve biraz daha açıklama yapıldığını hissediyorum.
Temel olarak dokümanlar, ayrımın büyük ölçüde bir performans artışı olduğunu belirtiyor. Derleme aşamasının, alt öğelerin kendileri derlenmeden ÖNCE DOM'yi değiştirmeniz gerektiğinde kullanıldığını yineleyeceğim.
Bizim amaçlarımız için, aksi takdirde kafa karıştırıcı olan terminolojiyi vurgulayacağım:
Derleyici SERVICE ($ compile), DOM'u işleyen ve direktiflerde çeşitli kod parçalarını çalıştıran açısal mekanizmadır.
FUNCTION derlemesi, direktif içinde belirli bir zamanda SERVICE ($ compile) derleyicisi tarafından çalıştırılan bir bit kodudur.
Derleme FUNCTION hakkında bazı notlar:
ROOT öğesini (direktifinizin etkilediği bir öğeyi) değiştiremezsiniz, çünkü zaten DOM'un dış seviyesinden derlenmiştir (SERVICE derlemesi zaten bu öğedeki yönergeleri taramıştır).
(İç içe) öğelere başka yönergeler eklemek isterseniz, şunlardan birini yapabilirsiniz:
Derleme aşamasında bunları eklemeniz gerekir.
Derleme hizmetini bağlantı aşamasına enjekte etmek ve öğeleri manuel olarak derlemek zorundasınız. AMA, iki kez bir şey derlemeye dikkat!
Ayrıca $ compile için iç içe ve açık çağrıların nasıl çalıştığını görmek de yararlıdır, bu yüzden http://jsbin.com/imUPAMoV/1/edit adresinde görüntülemek için bir oyun alanı oluşturdum . Temel olarak, sadece console.log adımlarını günlüğe kaydeder.
Bu kutuda gördüğünüz şeyin sonuçlarını burada anlatacağım. Tp ve sp özel yönergelerinin DOM'si için aşağıdaki gibi yuvalanmıştır:
<tp>
<sp>
</sp>
</tp>
Açısal derleme SERVICE:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Jsbin kodu ayrıca tp post-link FUNCTION açıkça sonunda derleme SERVICE çağırmak üçüncü yönerge (yukarı), sonunda her üç adımda yapar.
Şimdi, birinin çeşitli şeyler yapmak için derleme ve bağlantıyı nasıl kullanacağını göstermek için birkaç senaryodan geçmek istiyorum:
SENARYO 1: MAKRO Olarak Yönerge
Şablonunuzdaki bir özellikten türetebileceğiniz bir şeye dinamik olarak bir yönerge (ng-show diyelim) eklemek istiyorsunuz.
Şunu gösteren bir templateUrl'niz olduğunu varsayalım:
<div><span><input type="text"></span><div>
ve özel bir direktif istiyorsunuz:
<my-field model="state" name="address"></my-field>
DOM'u buna dönüştüren:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
temel olarak, direktifinizin yorumlayabileceği tutarlı bir model yapısına sahip olan kazan plakasını azaltmak istersiniz. Başka bir deyişle: bir makro istiyorsunuz.
Bu, derleme aşaması için harika bir kullanımdır, çünkü tüm DOM manipülasyonlarını yalnızca niteliklerden bildiğiniz şeylere dayandırabilirsiniz. Öznitelikleri eklemek için jQuery kullanın:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
İşlemlerin sırası şu şekildedir (bunu daha önce bahsedilen jsbin ile görebilirsiniz):
- SERVICE derlemesi alanımı bulur
- DOM'u güncelleyen yönerge üzerindeki FUNCTION derlemesini çağırır.
- Derleme SERVICE daha sonra elde edilen DOM ve COMPILES (özyinelemeli)
- SERVICE derlemesi daha sonra bağlantı öncesi yukarıdan aşağıya çağırır
- SERVICE derlemesi daha sonra bağlantı sonrası BOTTOM UP'ı çağırır, böylece alanımın bağlantı işlevi iç düğümler bağlandıktan SONRA çağrılır.
Yukarıdaki örnekte, direktifin tüm çalışmaları FUNCTION derlemesinde yapıldığından bağlantıya gerek yoktur.
Herhangi bir noktada, direktifteki kod SERVICE derleyicisinin ek elemanlar üzerinde çalışmasını isteyebilir.
Bu, derleme hizmetini enjekte ederseniz bir bağlantı işlevinde tam olarak aynı şeyi yapabileceğimiz anlamına gelir:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
$ Compile SERVICE ürününe ilettiğiniz öğelerin başlangıçta yönerge içermediğinden eminseniz (örneğin, tanımladığınız bir şablondan geldiler veya bunları açısal.element () ile oluşturdunuz), sonuçta hemen hemen önceki ile aynı (yine de bazı işleri tekrarlıyor olabilirsiniz). Ancak, öğenin üzerinde başka yönergeler varsa, bunların yeniden işlenmesine neden oldunuz, bu da her türlü düzensiz davranışa neden olabilir (örneğin, olayların ve saatlerin çift kaydı).
Bu nedenle, derleme aşaması makro tarzı işler için çok daha iyi bir seçimdir.
SENARYO 2: Kapsam verileri yoluyla DOM yapılandırması
Bu, yukarıdaki örnekten sonra gelir. DOM'yu işlerken kapsama erişmeniz gerektiğini varsayalım. Bu durumda, derleme bölümü sizin için işe yaramaz, çünkü bir kapsam mevcut olmadan önce olur.
Bu nedenle, doğrulamalarla bir girdiyi pezevenk etmek istediğinizi, ancak doğrulamalarınızı bir sunucu tarafı ORM sınıfından (DRY) dışa aktarmak ve bunların otomatik olarak uygulanmasını ve bu doğrulamalar için uygun istemci tarafı kullanıcı arayüzünü oluşturmasını istediğinizi varsayalım.
Modeliniz zorlayabilir:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
ve bir direktif isteyebilirsiniz:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
çeşitli doğrulama hatalarını göstermek için uygun yönergeleri ve div'leri otomatik olarak dahil etmek için:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
Bu durumda, kapsama kesinlikle erişmeniz gerekir (doğrulamalarınızın depolandığı yer budur) ve eklemeleri manuel olarak derlemek zorunda kalacaksınız, yine bir şeyleri çift derlememeye dikkat edin. (bir yan not olarak, içeren form etiketinde bir ad ayarlamanız gerekir (burada Formun varsayıyorum) ve iElement.parent (). controller ('form') ile bağlantılı olarak erişebilirsiniz. $ name) .
Bu durumda derleme işlevi yazmanın bir anlamı yoktur. Bağlantı gerçekten istediğiniz şeydir. Adımlar şöyle olacaktır:
- Açısal yönergelerden tamamen yoksun bir şablon tanımlayın.
- Çeşitli nitelikleri ekleyen bir bağlantı işlevi tanımlayın
- Üst düzey öğenizde izin verebileceğiniz açısal yönergeleri (alanım yönergesi) KALDIRIN. Zaten işlenmişler ve bu, çift işlenmelerini önlemenin bir yoludur.
- Üst düzey öğenizde SERVICE derlemesini çağırarak bitirin
Şöyle ki:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Tabii ki, üst düzey öğeyi tekrar derlerken ng yönergelerinin yinelenen işlenmesi konusunda endişelenmekten kaçınmak için iç içe öğeleri tek tek derleyebilirsiniz.
Bu senaryoda son bir not: Bir sunucudan yapılan doğrulamaların tanımını zorlayacağınızı ima ettim ve örneğimde bunları zaten kapsamda veri olarak gösterdim. Ben bir REST API (ipucu: ertelenmiş derleme) bu veri çekme ihtiyacı ile başa çıkmak için nasıl anlamaya okuyucu için bir egzersiz olarak bırakın.
SCENARIO 3: bağlantı yoluyla iki yönlü veri bağlama
Elbette bağlantının en yaygın kullanımı, çift yönlü veri bağlamasını saat / uygula ile bağlamaktır. Çoğu direktif bu kategoriye girer, bu yüzden başka bir yerde yeterince kapsanmıştır.
