impossibile accedere a rootcope var nello scope direttiva

Question

La funzione seguente definisce una variabile nel rootcope.

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']; 

il codice HTML nella direttiva sotto dipende da una variabile nella 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 
    } 
}); 

Tuttavia quanto sopra lavoro codice di doesnt. Funziona se definisco direttamente la variabile 'buttons' nell'ambito della direttiva.

Answer 1

si dispone di un isolare di validità del direttiva

scope:{} 

Ciò significa che la direttiva non ha accesso a scopi superiori - ricordate che isolare gli ambiti non lo fanno prototipicamente erediterà dal campo di applicazione genitore. Quindi si rimuove l'ambito isolato o si dice alla direttiva di associare alcune proprietà al suo ambito locale dall'ambito principale.

scope: {buttons: '='} 

quindi richiamare la direttiva come questa

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

Esempio: http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

---

Inoltre, piuttosto che modificare la $rootScope da un controller, si potrebbe desiderare di farlo dal run metodo

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

Prova:

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