scope variable undefined in directive link function

Question

I have a directive which has this piece of code:

return {
    restrict: "E",
    scope: {
        moduleProgress: "=",
        modules: "=",
        parentScroll: "="
    },
    templateUrl: 'app/program/module.list.template.html',
    link: function(scope,el,attrs,ctrl,tf) {
        $templateRequest("app/program/chapter.list.template.html").then(function(template) {
            var template = angular.element(template);
            var elements = [];

            console.log(scope);

            attrs.$observe("modules", function(val) {
                scope.modules.forEach(function(module) {
                    module.open = false;
                });
            });

For some reason, the first time I navigate to the view that contains this directive everything works fine, but from the second time onwards I always get a Cannot call method 'forEach' of undefined error. I read through some similar questions on SO which mentioned interpolated attributes not being instantly available on the link function, so they reccomended the use of $observe. I even added a console.log(scope) and the modules property shows up on the object. Any idea of what might be causing this?

scope.modules is an array. And even if it wasn't a valid method, the problem is that it says my scope.modules property is undefined. — Thiatt
– Thiatt, Commented Jul 21, 2015 at 11:45
I think you only use $observe on attributes (which I'm pretty sure always return strings) that contain interpolation i.e. {{}}. So don't think that will work on an array. I might be wrong though. I've never needed to use it. — Matt Herbstritt
– Matt Herbstritt, Commented Jul 21, 2015 at 11:53
Yeah, $observe is only for interpolated (@) attributes I guess. — Thiatt
– Thiatt, Commented Jul 21, 2015 at 11:58

Pankaj Parkar · Accepted Answer · 2015-07-21 11:58:13Z

1

It should be rather $scope.$watch rather that attrs.$observe as $observe required @ in isolated scope of directive & on html it would be modules="{{module}}", For big object DOM will get messed up so I'd prefer you to use $watch which make sense

Code

scope.$watch("modules", function(newVal) {
    if(newVal){
        scope.modules.forEach(function(module) {
            module.open = false;
        });
    }
});

edited Jul 21, 2015 at 11:58

answered Jul 21, 2015 at 11:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thiatt Over a year ago

That would be a solution. The problem was in my parent controller that defined $scope.modules after a promise, so in directive link time it wasn't available yet. I could $watch for the property or fetch the data on resolve, which is what I did. But thanks ;)

Pankaj Parkar Over a year ago

@Thiatt updated the answer..yes that if check will validate modules value is there or not, Glad to heard that it does helped..Do upvote please..Thanks :)

Worthy7 Over a year ago

After a lifetime of debugging, I finally discovered that promised data was causing my link function to run with undefined values.

Collectives™ on Stack Overflow

scope variable undefined in directive link function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related