SORU
23 Ocak 2013, ÇARŞAMBA


İki yönlü bağlama değil transcluded kapsamlı Direktifi çalışma

name modele bağlı bir denetleyici Bir textbox yaptım. Denetleyici içinde bir Direktif var ve aynı model name bağlı yönergesi içinde bir textbox var:

<div class="border" ng-controller="editCtrl">
   Controller: editCtrl <br/>
   <input type="text" ng-model="name" />
   <br/>
   <tabs>
      Directive: tabs <br/>
      <input type="text" ng-model="name"/>
   </tabs>
</div>

mod.directive('tabs', function() {
  return {
    restrict: 'E',
    transclude: true, 
    template:
      '<div class="border" ng-transclude></div>',
  };
});

Sen dış metin kutusuna bir şey yazdığınızda iç textbox yansıyan, fakat İç metin içinde bir şeyler yazarsanız hem textbox artık aynı değeri yansıtıyor çalışıyor yani durur.

Örnek bakın: http://jsfiddle.net/uzairfarooq/MNBLd/

Ayrıca iki yönlü bir sorudur bağlama (scope: {name: '='}) kullanarak denedim ama sözdizimi hatası veriyor.Ve scope: {name: '@'} kullanarak aynı etkiye sahiptir.

Herhangi bir yardım büyük mutluluk duyacağız.

, this article kabul cevabı ek olarak çok çocuk scpoes içinde prototip mirası anlamak bana yardımcı oldu. Çok kimseye kapsamları ile sorun iyice okunması için tavsiye ederim.

CEVAP
23 Ocak 2013, ÇARŞAMBA


transclude: true Bir Direktif Direktifi (transcluded) yeni bir alt kapsam oluşturma sonuçlar. Bu yeni kapsam prototypically üst kapsamdan devralır. Senin durumunda, üst kapsam kapsam editCtrl denetleyicisi ile ilişkilidir.

Kullanarak iki yönlü veri bağlama bir çocuk kapsamı (yani, ng-model) bağlamak için bir üst kapsam özelliği tutan bir ilkel değer (örneğin, name) her zaman sorunlara neden olur -- Evet, öyle olmalıyım ki her şey göründüğü gibi değil beklendiği gibi. Kapsam özelliği (örneğin, ikinci textbox türü) çocuğun kapsamında yeni bir özellik oluşturur çocuk değiştiğinde gizleyen aynı adı/gölgeler üst kapsam özelliği. Ana özelliği ilkel bir değeri yoksa, bu değer (aslında) alt özellik kopyalanırçocuk özelliği oluşturulur. Çocuk kapsamında gelecek değişiklikler (örneğin, ikinci textbox) "tek çocuk" özelliğini etkiler.

Önce yazmayı içine ikinci textbox (yani, önce mülkiyet değişti çocuk), çocuk/transcluded kapsam bulur name özellik üst kapsam ile ilk miras (kesik çizgi resim aşağıda). Bu iki metin kutularının başlangıçta senkronize olarak kalmıştır. "İlk metin kutusuna, bu kapsamları gibi ne: . Mark yazarsanız aşağıda,

transcluded scope follows inheritance chain

İki kapsamları inceleyebilirsiniz nereye fiddle bir ben yarattım. Tıklayın "kapsam" ikinci textbox içine yazmadan önce bağlantı ikinci textbox yanında göster. Bu transcluded çocuk kapsamını görmek için izin verir. Bu noktada name bir özelliğe sahip olmadığını fark edeceksiniz. Açık Konsol, ikinci metin kutusuna yazın, bağlantıyı yeniden tıklatın. Çocuk kapsamı name bir özelliği vardır, ve başlangıç değeri ana özellik olduğunu değer olduğunu fark edeceksiniz ("Mark"). "Seviyor" ikinci metin kutusuna, bu kapsamları gibi ne: . Açısal yazdığınız eğer

transcluded primitive hides parent property

İki çözümü vardır:

  1. @pgreen2 (bu "en iyi uygulama" çözüm) -- bir nesne yerine bir ilkel. gösteriyor ne Bir nesne kullanıldığında, transcluded kapsam/çocuk, yeni bir özellik değil. Sadece ilk miras oyuna geldi. Aşağıdaki resimde, editCtrl varsayalım. $kapsam bu nesne tanımlamıştır:
    $scope.myObject = { name: "Mark", anotherProp: ... }:
    object in parent
  2. kullanılan alt kapsamı (bu kırılgan bir çözümdür, ve HTML yapısı hakkında varsayımlar yapar tavsiye,) ebeveyn$: < içinde 14* *kullanın;giriş>bu < içinde;sekmeler>eleman. Önce yukarıdaki resim bunun nasıl olduğunu gösterir.

Bir sözdizimi hatası oluştuğunda kullanarak scope: {name: '='} çünkü kullanırken iki yönlü veri bağlama (yani, kullanırken '='), aradeğerleme izin verilmez yani, {{}} olamaz kullandı. <tabs name="{{name}}"> yerine <tabs name="name"> kullanın.

Kullanarak '@' çalışır durumda ng-transclude scope: { ... } kullanılarak oluşturulan kapsam izole değil transcluded kapsamında, kullandığı için. transclude aynı

(Çok) kapsamları hakkında daha fazla bilgi (resimler dahil) için bkz
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Android Central

    Android Cent

    13 Kasım 2008
  • Branboy3

    Branboy3

    12 AĞUSTOS 2012
  • Chaoticmoogle

    Chaoticmoogl

    13 ŞUBAT 2006