accessing rootScope in directive

Question

I've tried a million ways to access a rootScope variable from within this elasticui based directive with zero luck. Here is the directive, bearing in mind $rootScope is indeed being passed into its parent controller.

var elasticui;
(function (elasticui) {
var directives;
(function (directives, rootScope) {
    var IndexDirective = (function () {
        function IndexDirective() {
            var directive = {};
            directive.restrict = 'EAC';
            directive.controller = elasticui.controllers.IndexController;
            directive.link = function (scope, element, attrs, indexCtrl, rootScope) {
            console.log("Updated Index: " + $rootScope.esIndex);
            indexCtrl.indexVM.index = scope.$eval(attrs.euiIndex);
            };
            return directive;
        }
        return IndexDirective;
    })();
    directives.IndexDirective = IndexDirective;
    directives.directives.directive('euiIndex', IndexDirective);
})(directives = elasticui.directives || (elasticui.directives = {}));
})(elasticui || (elasticui = {}));

Elsewhere I'm setting $rootScope.esIndex to the index I'd like to point to but I'm getting "$rootScope is not defined". I've tried setting the directive's scope property to false, tried setting up a watcher on $rootScope.esIndex as part of the link functions return value but no matter what I do, I can't seem to figure it out.

I think part of the problem for me is this structure is a little cryptic from a directive standpoint for a newer angular person to digest. This is a block in a far larger set of directive definitions so it's just hard for me to grasp.

Any ideas how I can easy grab $rootScope in here?

Thanks a TON in advance!

You should definitely supply more code here, but I will say on initial glance you are passing `rootScope` and not `$rootScope` into the function. That could be a part of the issue. — Jon, Mar 22 '16 at 17:38

Steve Wakeford · Answer 1 · 2016-03-22T19:34:53.513

0

Seeing more of your code would help. Specifically when you say "$rootScope is indeed being passed". However, with this limited info why don't you try changing this line:

(directives = elasticui.directives || (elasticui.directives = {}));

to something like

(directives = elasticui.directives || (elasticui.directives = {}, rootScope));

At a glance it appears your self executing function isn't being passed the rootScope parameter it expects. Good luck!

edit: Also

console.log("Updated Index: " + $rootScope.esIndex);

Should probably not have the dollar sign.

edit: Comments have much more info!

edited Mar 22 '16 at 19:34

answered Mar 22 '16 at 17:36

Steve Wakeford

331
1
8

This is a modification of the following code, see line 179 https://github.com/YousefED/ElasticUI/blob/master/dist/elasticui.js I'm trying to end up with something like: indexCtrl.indexVM.index = $rootScope.esIndex; If I log out $rootScope.esIndex in the page's controller, I get the proper value and it appears that rootScope is indeed being passed into the above parent's controller however I can't seem to access it from within the directive itself. In my version I killed the watcher just to simplify it but yeah, the above page is what I'm working with. – omenclature Mar 22 '16 at 18:22
You need to declare an injected $rootScope service as they are doing on line 294 then it can be passed in as an argument to your function as shown on line 276. So you will have IndexDirective.$inject = ['$rootScope']; then function IndexDirective($rootScope).... Also take rootScope out of the arguments to your link function you don't need it. – Steve Wakeford Mar 22 '16 at 19:34
P.s. "vanilla" Angular is not like this, I'm not familiar with elasticui but I do agree that it's a bit cryptic in syntax. – Steve Wakeford Mar 22 '16 at 19:35

accessing rootScope in directive

1 Answers1