GRowing GRowing - 2 months ago 32
AngularJS Question

Angularjs - $rootScope in directive link function

I am asking this question because I am not quite clear on how to think of rootscope as a dependency passed to directives

I have a directive that needs to display some information from $rootScope ...

I thought I needed to pass the $rootScope to a directive but when I write a directive like this it seems to work.

.directive("myBar", function () {
return {
restrict: "E",
transclude: true,
replace: true,
template: '<div>' +
'<span ng-transclude></span>' +
'{{rsLabels.welcome}} {{rsUser.firstName}}!' +
'</div>'
}
})


When do I need to do this?

.directive("myBar", function ($rootScope) {
return {
restrict: "E",
transclude: true,
replace: true,
template: '<div>' +
'<span ng-transclude></span>' +
'{{rsLabels.welcome}} {{rsUser.firstName}}!' +
'</div>'
}
})


Can I and HOW do I use rootScope if I need it in the link function of the directive - or should I do it in the controller of the directive?

.directive("myBar", function ($rootScope) {
return {
restrict: "E",
transclude: true,
replace: true,
link: function (scope, element, attrs, rootScope) {
rootScope.rsUser = { firstName: 'Joe' };
rootScope.rsUser = { welcome: 'Welcome' };
},
template: '<div>' +
'<span ng-transclude></span>' +
'{{rsLabels.welcome}} {{rsUser.firstName}}!' +
'</div>'
}
})


My rootScope data is defined in run function

.run(function ($rootScope) {

$rootScope.rsLabels = {
welcome: 'Welcome'
};

$rootScope.rsUser = {
firstName: 'Joe'
};
});


Thank you!

Answer

From my experiments \ experience, it seems that since all $scopes ultimately inherit from the $rootScope you will be able to access data on it without requesting it as a service, following standard javascript prototypical inheritance rules. If you were to set the scope property in your directive to false or {} you will find that you can no longer access it.

.directive("myBar", function($rootScope) {
    return {
        restrict: "E",
        scope: { /* Isolate scope, no $rootScope access anymore */ },
        transclude: true,
        replace: true,
        template: '<div>' + 
                  '<span ng-transclude></span>' + 
                  '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                  '</div>'
    };
});

Example: http://jsbin.com/bequy/1/edit

Comments