2014-04-08 5 views
5

Ich habe folgendes Szenario: Eine transcluden Richtlinie mit isolierten Rahmen, die einen Controller in ihm angebracht hat:Zugangsrichtlinie der Steuerung von transkludiert Elementen

angular.module('app', []) 
.directive('hello', function() { 

    return { 

    controller: function($scope) { 
     $scope.hello = "Hello World"; 
    }, 

    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div class="hello" ng-transclude></div>', 
    scope: {} 
    }; 

}); 

Ich freue mich auf die Richtlinie der von den transkludiert Elementen Controller für den Zugriff auf :

<hello> 
    <h1>Hello Directive</h1> 

    <p>{{ hello }}</p> 
</hello> 

Dies scheint jedoch nicht möglich zu sein. Ich habe versucht, auf hello mit $parent und $$nextSibling zuzugreifen.

Gibt es eine Lösung für dieses Szenario? Ich bin nicht in der Lage, den Controller in Wrapper um die Direktive Instanz zu legen.

habe ich ein codepen dieses Verhalten zeigen: http://codepen.io/jviotti/pen/ktpbE?editors=101

Antwort

2

Sie müssen die Variable in die hallo-Richtlinie als verbindlich passieren, und schließen Sie sie auch als Teil des Isolats -umfang: http://codepen.io/anon/pen/yoCkp

Weitere Informationen hier: Confused about Angularjs transcluded and isolate scopes & bindings

Edit:

im ursprünglichen Beispiel erwartet die Vorlage, um die {{hallo}} Variable in der übergeordneten Stammbereich, bu t es ist tatsächlich in der hallo-richtlinie. In der Tat bedeutet der leere Isolate-Bereich in der Direktive, dass er keine Bereichsvariablen von seinem übergeordneten Element erhält. Die obige Änderung bewirkt also, dass die (nicht vorhandene) hello-Variable aus dem root-Bereich in die Direktive geleitet wird und anschließend der Wert festgelegt wird.

Um dies weiter zu veranschaulichen, können Sie einen Blick darauf werfen: http://codepen.io/anon/pen/pJEqjq - Sie werden sehen, dass der Controller $rootScope.hello Einstellung und es funktioniert auch. Dies wird jedoch nicht empfohlen, da der Zugriff auf die rootScope-Variablen über verschiedene Controller hinweg unordentlich werden kann.

+0

Im nicht funktionierenden Beispiel erwartet die Vorlage, dass die Variable {{hallo}} im übergeordneten Stammbereich liegt, aber tatsächlich im Geltungsbereich der hallo-Direktive ist. – goldins

+0

Der Artikel auf https://www.airpair.com/angularjs/posts/transclusion-template-scope-in-angular-directives half mir zu verstehen, warum es so funktioniert. – sven

Verwandte Themen