Angular-Direktiven mit^require - access elter scope?

Question

Ich versuche herauszufinden, wie man verschachtelte Direktiven mit Transclusion und^require in angular verwenden kann. Ich möchte eine outter-Direktive haben eine Variable, die von verschachtelten Kinder-Direktiven aktualisiert wird, aber ich möchte alle Kinder mit dieser Variablen verknüpft werden. Ich habe ein sehr einfaches Beispiel geschrieben, das Problem zu demonstrieren

JS

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('test', test); 

    function test() { 
     var directive = { 
      bindToController: true, 
      controller: testController, 
      'controllerAs': 'testController', 
      scope: {}, 
      templateUrl: 'scripts/test/test.html', 
      transclude: true 
     }; 
     return directive; 
    } 

    function testController() { 
     var self = this; 
     self.childCount = 0; 

     self.addChild = function addChild(child) { 
      self.childCount++; 
      child.childNumber = self.childCount; 
     } 
    } 

})(); 


(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('child', child); 

    function child() { 
     var directive = { 
      'scope': {}, 
      'link': link, 
      'templateUrl': 'scripts/test/child.html', 
      'transclude': true, 
      'require': '^test' 
     }; 
     return directive; 

     function link(scope, element, attrs, testController) { 
      scope.childNumber = null; 
      testController.addChild(scope); 
     } 

    } 

})(); 

Haupt HTML ruft

<test> 
    <child></child> 
    <child></child> 
    <child></child> 
</test> 

test.html Teil

<h1>self.childCount = {{testController.childCount}}</h1> 
<div ng-transclude></div> 

child.html Teil

<h3>I am child {{childNumber}} out of {{testController.childCount}}</h3> 

Ausgang (und Ausgabe)

self.childCount = 3 
I am child 1 out of 
I am child 2 out of 
I am child 3 out of 

Wie Sie sehen können, die child.html Ausgang nicht weiß, wie die Ausgabe {{testController.childCount }}. Irgendwelche Ideen, was schief läuft?

Answer 1

Normalerweise verwende ich controllerAs Syntax, aber vielleicht versuchen, 'scope': {} aus dem Kind Bereich entfernen. Es könnte sein, dass Ihre Child-Direktive keinen Zugriff auf den übergeordneten Controller-Bereich hat, indem Sie einen isolate-Bereich erstellen.