2014-04-08 11 views
5

Mam następujący scenariusz: dyrektywy transclude z izolowanym zakresu, który ma sterownik dołączony do niego:dyrektywa o dostępie jest od dołączany elementów

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: {} 
    }; 

}); 

Nie mogę się doczekać, aby uzyskać dostęp do kontrolera dyrektywy jest od dołączany elementów :

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

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

To jednak nie wydaje się możliwe. Próbowałem uzyskać dostęp do hello z $parent i $$nextSibling.

Czy istnieje rozwiązanie tego scenariusza? Nie jestem w stanie umieścić kontrolera w opakowaniu wokół instancji dyrektywy.

stworzyłem codepen wykazać to zachowanie: http://codepen.io/jviotti/pen/ktpbE?editors=101

Odpowiedz

2

Trzeba przekazać zmienną do dyrektywy witam jako wiążące, a także jako część zakresu izolowania: http://codepen.io/anon/pen/yoCkp

Więcej informacji tutaj: Confused about Angularjs transcluded and isolate scopes & bindings

Edit:

W oryginalnym przykład szablon {{oczekuje na cześć}} zmienną w zakresie korzeń rodzic, bu t jest faktycznie w zasięgu dyrektywy hello. W rzeczywistości, pusty zakres izolatu w dyrektywie oznacza, że ​​nie otrzyma żadnych zmiennych zasięgu od rodzica. Tak więc powyższą zmianą jest skierowanie (nieistniejącej) zmiennej hello z zakresu głównego do dyrektywy, a następnie ustawienie wartości.

Aby to lepiej zilustrować, można spojrzeć na to: http://codepen.io/anon/pen/pJEqjq - zobaczysz, że kontroler ustawia $rootScope.hello i działa również. Chociaż nie jest to zalecane, ponieważ poleganie na zmiennych rootScope pomiędzy różnymi kontrolerami może stać się kłopotliwe.

+0

W niedziałającym przykładzie szablon oczekuje, że zmienna {{hello}} znajduje się w głównym katalogu głównym, ale faktycznie znajduje się w zasięgu dyrektywy hello. – goldins

+0

Artykuł na https://www.airpair.com/angularjs/posts/transclusion-template-scope-in-angular-directives pomógł mi zrozumieć, dlaczego działa w ten sposób. – sven

Powiązane problemy