angularjs - ディレクティブスコープのrootscope変数にアクセスできません

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は、ルートスコープの変数に依存します-

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

ただし、上記のコードは機能しません。ディレクティブスコープで'buttons'変数を直接定義すると機能します。

Answer 1

ディレクティブに分離スコープがあります

scope:{}

これは、ディレクティブが上位スコープにアクセスできないことを意味します。分離スコープは親スコープから典型的に継承されないことに注意してください。そのため、isolate スコープを削除するか、親スコープから一部のプロパティをローカル スコープにバインドするようディレクティブに指示します。

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

Answer 2

試す：

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