37

In Angularjs, is there a specific reason to use $scope in controllers and scope (without "$") in directives link function? Is it just a convention or anything else?

3
  • 1
    It's just a variable name, so not really. Commented Oct 10, 2013 at 6:33
  • similar question here Commented Oct 10, 2013 at 7:37
  • You can find also a very good video answer to this question by John Lindquist here: http://egghead.io/lessons/angularjs-scope-vs-scope. Commented Oct 16, 2013 at 21:16

5 Answers 5

29

The case when you do $scope in controller the Dependency Injection injects scope based on matching the variable name $scope, in this case using scope as name would not work.

For case of directive the injection is position based so you can name your variable a or b or any thing. The directive order for link function is

(scope, iElement, iAttrs, controller)

so first element is always scope object.

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

1 Comment

I would clarify the latter part as "For case of the directive link function, the injection is position based, so using scope is really just convention." (I can't find any good explanation why $scope isn't used here, as well, if only for consistency)
2

The module factory methods like controller, directive, factory, filter, service, animation, config and run receive arguments through dependency injection (DI). In case of DI, you inject the scope object with the dollar prefix i.e. $scope. The reason is the injected arguments must match to the names of inject-able objects followed by dollar ($) prefix.

For example, you can inject the scope and element objects into a controller as given below:

module.controller('MyController', function ($scope, $element) { // injected arguments });

When the methods like directive linker function don’t receive arguments through dependency injection, you just pass the scope object without using dollar prefix i.e. scope. The reason is the passing arguments are received by its caller.

module.directive('myDirective', function () // injected arguments here 
{ 
    return { 
         // linker function does not use dependency injection 
         link: function (scope, el, attrs) { 
            // the calling function will passes the three arguments to the linker: scope, element and attributes, in the same order 
         } 
    }; 
});

In short, in case of dependency injection the scope object is received as $scope while in case of non-dependency injection scope object is received as scope or with any name.

Comments

1

The reason of this behavior is that, Unlike controllers, directives don't use dependency injection, instead they are passed the scope created by the controller that is placed behind the view. this is very tricky, So you can reuse your directive on different scopes.

Comments

1

The $ in "$scope" indicates that the scope value is being injected into the current context.

$scope is a service provided by $scopeProvider. You can inject it into controllers, directives or other services using Angular's built-in dependency injector:

module.controller(function($scope) {...})

which is shorthand for

module.controller(['$scope', function($scope) {...}])

However, scope could be anything, it's a function parameter name, could be foo or a12342saa.

function link( scope, element, attributes ) {
    //  Only scope 
}

Comments

0

The "$" in "$scope" indicates that the scope value is being injected into the current context. But, not all references to scope are based on dependency injection.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.