AngularJS: $ scope vs this: what is the use of $ scope?

Question

I found this in AngularJS Style Guide

Prefer to use the controller as syntax and capture it with a variable:

This means that I can assign all my functions and model to the controller through this and access it through an alias in the view. If I do this, I find that I no longer use for $scope . The only exception is when I want to access something in $rootScope .

So, with that suggestion in mind, when should I use $scope at all if I am not interested in accessing anything in $rootScope ?

That is, should I move everything to this controller? If not, what should remain in $scope ?

Answer 1

when should I use $ scope at all if I am not interested in accessing anything in $ rootScope?

• $scope is not just for accessing properties or functions in $rootScope . Example (not too often, by the way): Suppose you need to update the DOM element not in angular style, this means updating it through any external library that changes the value of the component (visually), but the ng-model component is not updated, and you need it ! What to do? Simple: $scope.$digest (depending on what you are doing, any other angular function may be required).

Should I move everything to the controller?

• No no! This is actually not a good idea. What for? When you move everything to the controller, you provide access to this "everything" from the view, which is impractical since you do not need everything to be declared in the controller in the view. Sometimes in the controller (in most cases) you have variables and functions that are used in the same way as other functions and variables (like private things): this should be stored "private" inside the controller. See the example below:

---

 angular .module('myapp', []) .controller('foo', function() { var vm = this; // only this will be available in the view thanks to the controller as syntax vm.wizard = { userID: null, totalCartCount: 0 } // stuff used only inside the controller vm.private = { subtotalByProducts: [], readyToCheckoout } // only "public" stuff is returned here return vm.wizard; // functions }); 

If not, what should remain in $ scope?

What you put in your $scope is entirely up to you, as it uses the controller as syntax, but keep in mind that everything in $scope available in the view. The idea is to reduce the number of variables passed to the view. This may not be noticeable in a small webapp, but when the size of the application increases, you may notice some changes (longer loading time, etc.).

This is a question of the prospects of each developer, and how any of us can be used to use the best practices.

Answer 2

Using this option instead of $ scope is not allowed until Angular 1.2 is released. $ scope was original, and this led to a substantial replacement, since most often they can be used interchangeably. However, they are technically different, and it looks like you would decide to use one over the other when calling a function.

From 'this' vs $ scope in AngularJS controllers :

it is - When the controller constructor function is called, it is the controller. When the function defined in the $ scope object is called, it is the "scope when the function was called." It may (or may not be!) Be the $ scope on which the function is defined. Thus, inside the function, this and $ scope may not match.

$ scope - Each controller has an associated $ scope object. The function of the controller (constructor) is responsible for setting the model properties and functions / behavior in the related field. Only methods defined on this $ scope object (and parent scope objects, if prototypical inheritance is in the game) are available from HTML / view. For example, from ng-click, filters, etc.

Clicking on the first link will show that this and $ scope are the same, since the "scope when the function was called" is the scope associated with ParentCtrl.

Clicking on the second link will show this, and $ scope does not match, since the "scope when the function was called" is the scope associated with ChildCtrl. Thus, the scope of ChildCtrl $ is set here. Inside the method, $ scope is still the scope of ParentCtrl $.

I try not to use this inside a function defined in the $ scope scope, since it confuses which $ scope affects, especially considering that ng-repeat, ng-include, ng-switch and directives can create their own child regions.

Answer 3

$scope should be used for things that cannot be done with this (which is equivalent to a controller instance and becomes a property on $scope when used with controllerAs syntax). This includes all area methods .

For some of these methods, $scope can usually be replaced with $rootScope , but it’s semantically correct not to do this (not doing this can also be useful for checking). Examples are $apply / $evalAsync with no string argument, $on / $broadcast / $emit for events that are used exclusively in the kernel area.

For some of these methods, $scope cannot be replaced with $rootScope , which will lead to unexpected behavior.

When $scope used for $scope properties, it can be replaced with the syntax this and controllerAs.