I've been using var and $scope.varname and both work fine in AngularJS. I was wondering if there was a difference between the two functionally, and what best practice was in which one to use?
5 Answers
Yes! $scope variables bind to the view where as var does not and is local to the function it was declared in!
var x = 3;
$scope.y = 3;
{{x}} - undefined
{{y}} - 3
7 Comments
itamar
Thanks! That clarifies a lot. So any variables I'm using strictly for logic in the JS should be
var and any variables that need to be open to the front-end should be in $scope?
tymeJV
@itamar -- pretty much, yep
Christine268
GOOD TO KNOW. I've been using
$scope on all my variables. tired of seeing $scope everywhere! Finally decided to see if I need it or if I can just use var. Plus, this will help distinguish in the code which variables effect the view! :Ditamar
@Shane - a while later, I can say there def is. The more $scope variables you have, the more has to be checked when the digest cycle runs. So if it's not used in the UI, don't keep it as a $scope variable.
Máxima Alekz
$scope is "like" global variables?
|
The technical implications of using var and $scope have been described by @tymeJV and others. I think the next logical question answer is: When do I use either?
TL;DR - if you do not use a variable in a view (e.g. {{myVar}} ), use var.
The reason is two fold:
Encapsulation - hide state that is not necessary to the view. This will prevent unintended modifications of the variable.
Performance (prevent extra digest cycles) - Angular performs "dirty state" checking on variables. Modifying a variable that's not used in the view may cause extra digest cycles unnecessarily. In an application with a couple of
ng-repeats and a bunch of watches, this can have a huge impact.
Comments
1 - $scope, is the glue between your controller and your view/model , when you are defining a variable/function to the $scope of a controller, your whole view , which this controller controls it ! , can see that variable/function . Where a pure variable just works in that controller , not even the view of that controller!
2- Every thing that has been defined to the $scope , is manupulatable from the outside of the controller , throughout the Directives , Services , your html view ... , while a pure variable is NOT;
Comments
Simply spoken - all variables you define on $scope, e.g. in your controller, are available in your html markup. in case you need a variable just inside your js functions, you can declare it with var, they are only locally available. Same with functions.
Comments
$scope bind value to the view and var is the local variable to the application.
1 Comment
pirho
While this may answer the question, it is better to explain the essential parts of the answer and possibly what was the problem with OPs code.
scopeis apropertyof thescopethus exposed to thehtml, and localvarsin thecontrollerare not exposed and are their ownobjects.