2013-10-13 18 views
20

Ben yinelemeli bir ebeveyn "kutu" yönergesinin kontrolörü ulaşmaya çalışıyorum: Ben denetleyici değişken bağlantı fonksiyonunda undefined olmasını beklediğinizEbeveyn yönergesinin denetleyicisine, yinelemeli olarak gereksinim duyarak nasıl erişilir?

<body ng-app="main"> 

<!-- no nesting: parent is the just body --> 
<box></box> 

<script type="text/javascript"> 
angular.module('main', []) 
.directive('box', function() { 
    return { 
     restrict: 'E', 
     controller: function() { }, 
     require: '?^box', // find optional PARENT "box" directive 
     link: function(scope, iElement, iAttrs, controller) { 
      // controller should be undefined, as there is no parent box 
      alert('Controller found: ' + (controller !== undefined)); 
     } 
    }; 
}); 
</script> 
</body> 

ama gerçek kutu direktifin kontrolörü olsun .

Yani benim soru ... Böyle durumda VELİ denetleyicisi erişmek için nasıl:

<box> 
    <box></box> 
</box> 

http://jsfiddle.net/gjv9g/1/

cevap

18

Tamam,

Bir üst elemanın kontrolörün ele almak istiyorsanız ... buldum: Bu ana direktifin kontrolörü veya bir seviye daha yüksek, ya döndürür

... 
link: function(scope, iElement, iAttrs, controller) { 
    // http://docs.angularjs.org/api/angular.element 
    // jQuery/jqLite Extras: 
    // 
    // controller(name) - retrieves the controller of the current element or its parent. 
    // By default retrieves controller associated with the ngController directive. 
    // If name is provided as camelCase directive name, then the controller for this 
    // directive will be retrieved (e.g. 'ngModel'). 
    var parentCtrl = iElement.parent().controller('box'); 
} 
... 

... 
controller: function($scope, $element) { 
    // store the element in controller, we'll need it later 
    this.$element = $element; 
}, 
// works in both pre and post link functions 
link: function() { 
    var parentElement = $element.parent(); 
    var parentCtrl = parentElement.controller('box'); 

    var hasDirectBoxParent = parentCtrl && parentCtrl.$element[0] === parentElement[0]; 

} 
... 

: Eğer bir DOĞRUDAN ebeveynin bir denetleyici olsun emin olmak gerekirse üst öğesi direktifin kontrolör, ben bu (belki, bilmiyorum daha iyi bir çözüm yoktur) bulundu Örnek 1: bağlantı fonksiyonu "kutu a" üzerinde çağrıldığında

<box id="a"> 
    <box id="b"></box> 
<box> 

, parentCtrl her iki durumda da undefined olduğunu. Bağlantı işlevi "kutu b" üzerinde çağrıldığında, parentCtrl her iki durumda da "kutu a" denetleyicisidir.

Örnek 2: bağlantı fonksiyonu "kutu a" üzerinde çağrıldığında

<box id="a"> 
    <div> 
     <box id="b"></box> 
    </div> 
<box> 

, parentCtrl her iki durumda da undefined olduğunu. Bağlantı işlevi "kutu b" üzerinde çağrıldığında, parentCtrl her iki durumda da hala "kutu a" denetleyicisidir, ancak hasDirectBoxParent değeri false'dir, bu nedenle üst öğeyi büyükbabadan ayırt edebilirsiniz.

4

require için gerekli (ana) direktifi gelen kontrolörü enjekte Şu anki yönerge (açısal dokümanlardan: - gerektirir) - Başka bir yönerge gerektirin ve denetleyicisini "http://docs.angularjs.org/guide/directive bağlantı işlevine ilişkin dördüncü bağımsız değişken olarak"

ne istiyorsun? Yani, ana denetleyici controller parametresi aracılığıyla çocuklara enjekte edilir.

+0

ile require: '?^box', yerine, orada benim orijinal örnekte hiçbir VELİ kutusudur, bu yüzden dördüncü parametre olarak 'undefined' almak için bekliyorum Bağlama işlevi, örneğin kendisi denetleyicisinin değil – maX

+0

Ancak bir denetleyici bildiriyorsunuz. Böylece ebeveyn o denetleyiciyi alır ve (varsa) çocuklardan miras alır. Amacınız belirli bir direktifin ebeveyn mi, yoksa çocuk mu olduğunu bilmek mi? Öyleyse, belki de $ parent kapsamına bakmak istersiniz? – KayakDave

+1

Özellikle kapsamı kullanmanız gerekiyorsa, kapsamları zorlaştırabileceğinden, aslında bu durumda kapsam kullanmak istemiyorum. Ayrıca, en iyi uygulama denetleyicileri ve yönerge yönlendirme iletişimi için 'require' kullanmaktır. Benim amacım, farklı bir isimle bir ebeveyn yönergesine ihtiyaç duyduğunuzda bir çekicilik gibi çalışmasıdır, neden bunu tekrar tekrar yapamazsınız. – maX

39

Köşeli 1.3'ten beri, "yalnızca" üst öğelerde bir yönerge aramak için ^^ iki aksamı kullanabilirsiniz. Angular Docs on require den

Alıntı:

  • (no prefix) - Geçerli elemanda gereklidir denetleyicisi bulun. Bulunamadıysa bir hata atın.
  • ? - Gerekli olan denetleyiciyi bulmaya çalışın veya bulunamıyorsa nn bağlantısını fn'ye geçirin.
  • ^ - Öğeyi ve ebeveynlerini arayarak gerekli denetleyiciyi bulun. Bulunamadıysa bir hata atın.
  • ^^10 - Öğenin ebeveynlerini arayarak gerekli denetleyiciyi bulun. Bulunamadıysa bir hata atın.
  • ?^ - Öğeyi ve ailesini aratarak gerekli denetleyiciyi bulmayı veya bulunamadığında bağlantıyı fn'ye geçirmeyi deneyin.
  • ?^^ - Öğenin ebeveynlerini arayarak gerekli denetleyiciyi bulmaya çalışın veya bulunamadığında bağlantıya nn geçirin. Senin durumunda

, gördüğünüz gibi require: '?^^box',

İlgili konular