SORU
27 Temmuz 2013, CUMARTESİ


Nasıl kendi kapsamı ile özel bir yönerge *içinde üst kapsam erişmek için* AngularJS?

"Bir Direktif içinde. kapsam üst erişim herhangi bir şekilde arıyorum Kapsamı herhangi bir kombinasyonu, transclude, yukarıda, vb değişkenleri (veya kapsam kendisi) geçen gerektirir. Arkaya eğilmek için tamamen hazırım, ama bir şey tamamen hacky veya unmaintainable önlemek istiyorum. Örneğin, şu anda önbağlama (prelink) parametreleri $scope alıp $sibling üzerinde yineleme tarafından yapabileceğimi biliyorum kapsamları kavramsal bulmak için "". ebeveyn

Gerçekten istediğim şey 9 ** ebeveyn kapsamında ifade edebilmek için. Eğer bunu başarırsam, o zaman burada yapmak istediğim şeyler başarabilirim: AngularJS - How to render a partial with variables?

Önemli bir notDirektif yeniden kullanılabilir aynı üst kapsam içinde olmalı. yani Bu nedenle, varsayılan davranış (kapsam: false) benim için çalışmıyor. Yönetmelik örnek başına tek bir kapsam ihtiyacım var, ve sonra 10 ** üst kapsamı içinde yaşayan bir değişkene ihtiyacım var.

Bir kod örneği 1000 kelime, bir o kadar da değer

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});

CEVAP
27 Temmuz 2013, CUMARTESİ


What are the nuances of scope prototypal / prototypical inheritance in AngularJS? bkz

Özetlemek gerekirse: bir yönerge üst ($parent) kapsam erişir şekilde kapsam türü yönergesi oluşturur: bağlıdır

  1. varsayılan (scope: false) - Direktif miras burada yok o yüzden yeni bir kapsam oluşturmaz. Direktif kapsamında üst/konteyner olarak aynı kapsam. Bağlantı fonksiyonu, ilk parametre (genellikle scope) kullanın.

  2. scope: true - Bu yönerge prototypically üst kapsamdan devralan yeni çocuk bir kapsam oluşturur. Üst kapsam tanımlanan özellikleri yönergesi scope (ilk miras nedeniyle) için kullanılabilir. Sadece Direktif kapsamı (gizler aynı adı/gölgeler üst kapsam özelliği) yeni bir özellik yaratacak ilkel kapsam tesisinde ... ... yazmaya dikkat edin.

  3. scope: { ... } - Bu yönerge, yeni yalıtmak/izole bir kapsam oluşturur. Prototypically üst kapsam miras almaz. Hala üst kapsam $parent kullanarak ulaşabilirsiniz, ama bu, normalde tavsiye edilmez. Bunun yerine, sizin gerektiğini belirten üst kapsam özellikleri (ve/veya fonksiyon) Yönerge ihtiyaçları ile ek özellikleri de aynı eleman nerede yönergesi kullanılır, kullanarak =, @ & gösterim.

  4. transclude: true - yeni bir oluşturur yönergesi "" hangi çocuk kapsam, prototypically üst kapsamdan devralır. transcluded Eğer bu madde kapsamı izole oluşturursa, transcluded ve kapsamları kardeş izole. Her kapsam $parent özelliği başvurular aynı ana kapsamı.
    Açısal v1.3 güncelleştirin: Eğer bu madde kapsamı izole oluşturursa, transcluded kapsamı, kapsam izole bir çocuk. Transcluded ve izole kapsamları artık kardeş. Transcluded kapsam $parent şu anda haklar kapsamında izole başvuruyor.

Yukarıdaki link tüm 4 tip örnekleri ve Resimleri var.

Direktif kapsamında derleme erişimi (burada bahsedilen: https://github.com/angular/angular.js/wiki/Understanding-Directives) işlevi olamaz. Bağlantı işlevi Yönerge kapsamında erişebilirsiniz.

İzliyor:

1. ve 2. yukarıda: bir Direktif niteliği yoluyla ihtiyaçlarını belirlemek, dikkat et o zaman$: normal

<div my-dir attr1="prop1"></div>

scope.$watch(attrs.attr1, function() { ... });

Eğer bir nesne özelliği izliyorsanız, $ayrıştırma kullanmanız gerekir:

<div my-dir attr2="obj.prop2"></div>

var model = $parse(attrs.attr2);
scope.$watch(model, function() { ... });

3. yukarıda (kapsam izole), Direktif özelliği verdiğiniz isim @ = gösterimde izle

<div my-dir attr3="{{prop3}}" attr4="obj.prop4"></div>

scope: {
  localName3: '@attr3',
  attr4:      '='  // here, using the same name as the attribute
},
link: function(scope, element, attrs) {
   scope.$watch('localName3', function() { ... });
   scope.$watch('attr4',      function() { ... });

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • isupportthegosselins

    isupporttheg

    6 Aralık 2009
  • JamesAtiPhone

    JamesAtiPhon

    16 EYLÜL 2010
  • Paul Schroder

    Paul Schrode

    30 Kasım 2007