angularjs - 无法在指令范围内访问 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
  }
});

但是上面的代码不起作用。如果我在指令范围内直接定义“按钮”变量，它会起作用。

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

Answer 2

尝试：

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