SORU
14 ŞUBAT 2013, PERŞEMBE


AngularJS : gözlemlemek $arasındaki Fark $izle yöntemler

Her ikisi de Watchers Observers kısa sürede AngularJS 3 ** değişiklikler bir şey olarak hesaplanan biliyorum. Ama ikisi arasındaki farkın ne olduğunu anlayamadı.

Benim ilk anlayış Observers HTML tarafında koşulları Watchers $scope.$watch() fonksiyon çalıştırıldığında yürütülen bir yere kadar açısal ifadeler için hesaplanan. Doğru düşünüyor muyum?

CEVAP
16 ŞUBAT 2013, CUMARTESİ


$observe()Attributes nesne üzerinde bir yöntemi vardır, ve gibi, sadece değer/DOM bir özniteliğin değiştirmek izlemek için kullanılabilir. Sadece/iç direktifleri adı kullanılır. Kullanım/ilişkilendirme içeren DOM niteliği gözlemek izlemek için ihtiyacınız olduğunda inceleyin (örneğin, {{}}'s). $
E. g., attr1="Name: {{name}}", sonra bir Direktif: attrs.$observe('attr1', ...).
(scope.$watch(attrs.attr1, ...) çünkü işe yaramaz çalışırsanız {{}}*. *10) alacaksın ... Kullanım her şey için izlemek dolar.

$watch()daha karmaşık. /"İfade", burada ifade ya da bir fonksiyon veya bir dize olabilir. bir izlemek olabilir Eğer bu ifade bir dize ise, $parse'd (Angular expression olarak değerlendirilen, yani () fonksiyonu içine. (Her Özet döngüsü olarak adlandırılan bu fonksiyon.) String ifade içeremez {{}}'s. izle Scope nesne üzerinde bir yöntem, kapsam bir nesneye erişimi olan her yerde sağlanabilir, dolayısıyla kullanılabilir$

  • bir denetleyici ng-view, ng-kontrol veya Direktif kontrolörü ile -- bir oluşturulan herhangi bir kumanda--
  • bir bağlama bu kapsam olarak iyi erişimi vardır beri bir yönerge fonksiyon

Dizeleri Açısal ifadesi olarak değerlendirildiği için, $izle sık/model/kapsam bir özellik gözlemlemek izlemek için kullanılır. E. g., attr1="myModel.some_prop", sonra bir kontrol ya da bağlantı işlevi: scope.$watch('myModel.some_prop', ...) scope.$watch(attrs.attr1, ...) (scope.$watch(attrs['attr1'], ...)).
Eğer denerseniz (attrs.$observe('attr1') dize alacaksın ne istediğinizi muhtemelen değildir myModel.some_prop,.)

@PrimosK cevabı yorumlar, gözlemler dolar olarak açıklanan ve $saatler digest cycle her kontrol etti.

Kapsamları ayrı tutma direktifleri daha karmaşık. '@' Sözdizimi kullanılır, $inceleyinya $izleilişkilendirme içeren bir DOM özniteliği (örneğin, {{}}'s). ($Saat çalışıyor neden çünkü '@' sözdizimi bizim için interpolation yok, dolayısıyla $saati olmadan bir dize görür {{}}'s.) Daha kolay kullanmanızı öneririm etmek hatırlamak dolara mal olan bu dava için de gözlemleyin.

Bu test yardımcı olmak için, iki direktifleri tanımlayan bir Plunker yazdım. Yeni bir kapsam oluşturmak değil, diğer (d2) kapsam izole oluşturur. Her Direktif aynı altı özelliklere sahiptir. Öznitelik gözlemlemek ikisi de $ve $İzle her tanımladı.

<div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"
        attr5="a_string" attr6="{{1 aNumber}}"></div>

Konsol farklılıkları görmek için günlüğü inceleyin $arasında ve bağlama işlevi gözcü $bak. O zaman linki tıklayın ve bakın $gözlemler ve $saatler mülkiyet değişiklikleri tıklatma işleyicisi tarafından tetiklenir.

Bağlantı işlevi çalıştığında, tüm bu nitelikleri içeren dikkat edin {{}}'henüz eğer özniteliklerini incelemek için çalışırsanız, undefined alacaksın yani () değerlendirildi s değildir. Aralıklı değerlerini görmek için tek yol olduğunu kullanın gözlemlemek $veya $Eğer bir kapsam kullanarak yalıtmak izle '@'). Bu nedenle, bu öznitelikleri değerleri alıyorumzaman uyumsuzoperasyon. (Ve bu gözlemlemek $neden ihtiyacımız olduğunu ve $işlevlerini izlemek.)

Bazen ihtiyacın yok $gözlemlemek ya $izle. E. g., eğer öznitelik, bir sayı veya bir boolean (bir dize) içeriyorsa, sadece bir kez onu değerlendirmek: attr1="22" o zaman, söyle, bağlama işlevi: var count = scope.$eval(attrs.attr1). Sadece sabit bir dize&; attr1="my string" - sadece senin Direktifi attrs.attr1 kullan-o zaman if ($eval gerek()).

Ayrıca Vojta's google group post izle hakkında ifadeler $bakın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Feel The Electricity!

    Feel The Ele

    20 ŞUBAT 2010
  • Flash CS6 Video Tutorials for Beginners (Actionscript 3 Gaming)

    Flash CS6 Vi

    14 EYLÜL 2012
  • happyjpy

    happyjpy

    22 AĞUSTOS 2009