ディレクティブスコープのrootscope varにアクセスできない

Question

以下の関数は、ルートスコープ内の変数を定義します。

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

しかし上記のコードdoesntの仕事。これは、ディレクティブスコープ内で 'buttons' varを直接定義すると機能します。

Answer 1

あなたはは、このディレクティブは、上のスコープへのアクセス権を持っていないことを意味し、あなたのディレクティブで

scope:{} 

をスコープを隔離持っている - スコープがprototypically親スコープから継承しません分離することを覚えておいてください。したがって、分離スコープを削除するか、親スコープからローカルスコープにいくつかのプロパティをバインドするようにディレクティブに指示します。この

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

例のようなディレクティブを呼び出す

scope: {buttons: '='} 

その後：むしろ、コントローラから$rootScopeを修正するよりもhttp://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

---

、あなたは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'}]; 
}); 

Answer 2

試してみてください。偉大な返信用

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