nie można uzyskać dostępu do korzeniac var w zakresie dyrektywy

Question

Poniższa funkcja definiuje zmienną w korzeniec.

function MyCtrl($scope, $rootScope) { 
    $rootScope.buttons = [{href: '#/students', icon:'icon-ok'}, 
         {href: '#/students', icon:'icon-remove'}, 
         {href: '#/students/new', icon:'icon-plus'}]; 
} 
MyCtrl.$inject = ['$scope', '$rootScope']; 

HTML w dyrektywie poniżej zależy od zmiennej w rootscope -

angular.module('btnbar.directive', []). 
directive("btnBar", function(){ 
    return { 
    restrict: 'E', 
    scope :{}, 
    controller: function($scope, $element,$rootScope) { 
    }, 
    template:'<div class="btn-toolbar">' + 
     '<a class="btn" ng-repeat="b in buttons" href={{b.href}}>' + 
     '<i class={{b.icon}}></i></a></div>', 
    replace:true 
    } 
}); 

Jednakże powyższy kod pracy robi. Działa, jeśli bezpośrednio zdefiniuję zmienną "guziki" w zakresie dyrektywy.

Answer 1

masz izolować w zakres dyrektywy

scope:{} 

Oznacza to, że dyrektywa nie ma dostępu do górnych zakresów - pamiętaj, że izolowanie zakresy nie prototypowo dziedziczyć z zakresu nadrzędnego. Tak więc albo usuń zakres izolatu, albo powiedz dyrekcji, aby powiązała niektóre właściwości z jego zasięgiem lokalnym z zakresu nadrzędnego.

scope: {buttons: '='} 

Następnie powołać dyrektywę jak ten

<btn-bar buttons="buttons"></btn-bar> 

Przykład: http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

---

Ponadto, zamiast modyfikowania $rootScope z kontrolera, można to zrobić z run metoda

var app = angular.module('app', ['btnbar.directive']); 

app.run(function($rootScope){ 
    $rootScope.buttons = [{href: '#/students', icon:'icon-ok'}, 
         {href: '#/students', icon:'icon-remove'}, 
         {href: '#/students/new', icon:'icon-plus'}]; 
}); 

Answer 2

Spróbuj:

<a class="btn" ng-repeat="b in $root.buttons" href={{b.href}}>