CODEWITHSUNDEEP
angularjsangularjs-scope
murtaza52
murtaza52

Reputation: 47441

unable to access rootscope var in directive scope

The function below defines a variable in the 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'];

The html in the directive below depends upon a variable in the 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
  }
});

However the above code doesnt work. It works if I directly define the 'buttons' var in the directive scope.

Upvotes: 14

Views: 21660

Answers (2)

Tony L&#226;mpada
Tony L&#226;mpada

Reputation: 5459

Try:

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

Upvotes: 19

jaime
jaime

Reputation: 42031

You have an isolate scope in your directive

scope:{}

This means that the directive doesn't have access to upper scopes - remember that isolate scopes don't prototypically inherit from the parent scope. So you either remove the isolate scope or tell the directive to bind some properties to its local scope from the parent scope. 

scope: {buttons: '='}

Then invoke the directive like this

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

Example: http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview

Also, rather than modifying the $rootScope from a controller, you might want to do it from the run method

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

Upvotes: 23

Related Questions