Не удалось получить доступ к корневому var var в области действия

Функция ниже определяет переменную в корневом каталоге.

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 в директиве ниже зависит от переменной в корнеплодах -

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
  }
});

Однако приведенный выше код не работает. Он работает, если я непосредственно определяю "кнопки" var в области действия.

Ответ 1

В вашей директиве изолировать

scope:{}

Это означает, что директива не имеет доступа к верхним областям - помните, что области выделения не прототипически наследуются от родительской области. Таким образом, вы либо удаляете область изоляции, либо указываете директиве связывать некоторые свойства с ее локальной областью из родительской области.

scope: {buttons: '='}

Затем вызовите директиву, подобную этой

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

Пример: http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

Кроме того, вместо изменения $rootScope с контроллера вы можете сделать это с помощью метода run

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

Ответ 2

Try:

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