AngularJS Directive $scope is undefined

Question

I have the following directive. When I trigger the open function and get to the debugger I get an error message in the console that says Uncaught ReferenceError: $scope is not defined(…).

How is it possible for $scope.open to be called when $scope is undefined?

app.directive('photo', ['$http', 'modal', function($http, modal) {
    return {
        replace: true,
        templateUrl: '/assets/photo.html',
        transclude: false,
        scope: {
            result: '=',
            index: '@'
        },
        controller: ['$scope', '$http', 'modal', function($scope, $http, modal) {
            $scope.prev = $scope.index - 1;
            $scope.open = function() {
                debugger;
            };
        }]
    }
}]);

Here is my DOM:

<div ng-repeat="r in results" photo result="r" index="$index"></div>

If I insert console.log($scope) just before my open function, and then again right before the debugger in that function, I get the following results. Left is before open is called, right is after open is called.

What do you see when you add this line before debugger; console.log($scope);. This may be important because the compiler may be optimizing your $scope variable away when you're inside of $scope.open. — Steven Wexler
– Steven Wexler, Commented Feb 8, 2016 at 19:06
I just updated my question with a screenshot. Note that temp1 != temp2. — Daniel Bonnell
– Daniel Bonnell, Commented Feb 8, 2016 at 19:11
$id shouldn't be a string. The AngularJS framework uses numbers for scope $id. Something outside Angular is messing with that reserved variable. — georgeawg
– georgeawg, Commented Feb 8, 2016 at 21:05

Alon Eitan · Accepted Answer · 2016-02-08 19:07:28Z

3

You inject the $http and modal in the directive definition (as you did), no need to in the controller function, just do:

controller: function($scope) {
        $scope.prev = $scope.index - 1;
        $scope.open = function() {
            debugger;
        };
    }

answered Feb 8, 2016 at 19:07

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

7 Comments

Daniel Bonnell Over a year ago

Ok, so this solves the problem, but what I'd like to know is why? I have used the same dependency injection format for many other directives without any issues. Why would this one be different?

Alon Eitan Over a year ago

I'm sorry, but I don't really know the reason for that :(

Steven Wexler Over a year ago

His syntax to inject $scope should work just fine. Check out "Creating Directives that Communicate" in the docs.

Alon Eitan Over a year ago

@StevenWexler - Thank you, I will look into that

Daniel Bonnell Over a year ago

I wonder if it's somehow affected by ng-repeat, but that strikes me as strange, since most of my directives are attached to repeaters just like the snippet in my question.

|

Steven Wexler · Accepted Answer · 2016-02-08 19:13:17Z

1

Try adding a statement that uses $scope in $scope.open. Chrome has probably optimized $scope away when you're in $scope.open because you're not using it.

$scope.open = function() {
  console.log($scope);
  debugger; //now you should see $scope.
};

answered Feb 8, 2016 at 19:13

Steven Wexler

17.5k8 gold badges59 silver badges83 bronze badges

Comments

mesutpiskin · Accepted Answer · 2017-12-16 18:33:23Z

1

its worked for me

var app = angular.module("moduleTest",[]);
app.directive("testDirective",function(){
    return {
        restrict: "A",
        scope: true,
        link: function(scope, element){
           //code
           //and $scope is scope
        }
    }   
 });

answered Dec 16, 2017 at 18:33

mesutpiskin

1,9672 gold badges28 silver badges30 bronze badges

Comments

crackmigg · Accepted Answer · 2016-02-08 19:07:38Z

0

This should work:

app.directive('photo', ['$http', 'modal', function($http, modal) {
return {
    replace: true,
    templateUrl: '/assets/photo.html',
    transclude: false,
    scope: {
        result: '=',
        index: '@'
    },
    controller: function($scope, $http, modal) {
        $scope.prev = $scope.index - 1;
        $scope.open = function() {
            debugger;
        };
    }
}
}]);

answered Feb 8, 2016 at 19:07

crackmigg

5,9412 gold badges35 silver badges41 bronze badges

Comments

Rahul Tagore · Accepted Answer · 2016-02-08 19:09:38Z

0

You need to define the $Scope at the top i.e.:
app.directive('photo', ['$http', '$Scope','modal', function($http, $Scope, modal)

It will work fine now.

answered Feb 8, 2016 at 19:09

Rahul Tagore

1019 bronze badges

1 Comment

Daniel Bonnell Over a year ago

You don't inject $scope into a directive like that. My dependency injection is correct. I know because I have dozens of other directives following the same format that work great.

Collectives™ on Stack Overflow

AngularJS Directive $scope is undefined

5 Answers 5

7 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related