không thể truy cập rootscope var trong phạm vi chỉ thị

Question

Hàm dưới đây xác định một biến trong rootscope.

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

Các html trong chỉ thị dưới đây phụ thuộc vào một biến trong 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 
    } 
}); 

Tuy nhiên, công việc mã doesnt trên. Nó hoạt động nếu tôi trực tiếp xác định các 'nút' var trong phạm vi chỉ thị.

Answer 1

Bạn có một cô lập phạm vi trong chỉ thị của bạn

scope:{} 

này có nghĩa là chỉ thị không được tiếp cận với phạm vi trên - hãy nhớ rằng cô lập phạm vi không nguyên mẫu kế thừa từ phạm vi phụ huynh. Vì vậy, bạn hoặc loại bỏ các phạm vi cô lập hoặc nói với các chỉ thị để ràng buộc một số thuộc tính phạm vi địa phương của nó từ phạm vi phụ huynh.

scope: {buttons: '='} 

Sau đó gọi chỉ thị như

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

Ví dụ này: http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

---

Ngoài ra, chứ không phải là sửa đổi $rootScope từ một bộ điều khiển, bạn có thể muốn làm điều đó từ run phương pháp

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

Hãy thử:

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