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

Question

I found this in AngularJS style guide

Prefer using controller as syntax and capture this using a variable:

That means that I can

Answer 1

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

For some of these methods $scope can generally be replaced with $rootScope, but it is semantically correct to not do that (not doing that may also be good for testability). The examples are $apply/$evalAsync without string argument, $on/$broadcast/$emit for events which are used exclusively on root scope.

For some of these methods $scope cannot be replaced with $rootScope, doing that will result in unexpected behaviour.

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

Answer 2

Use of this instead of $scope was not allowed until Angular 1.2 was released. $scope was the original and this came to essentially supersede it as more often than not they can be used interchangeably. They ARE technically different, though, and it seems you would base a decision to use one over the other on when the function was being called.

From 'this' vs $scope in AngularJS controllers:

this -

When the controller constructor function is called, this is the controller. When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on. So, inside the function, this and $scope may not be the same.

$scope -

Every controller has an associated $scope object. A controller (constructor) function is responsible for setting model properties and functions/behavior on its associated $scope.

Only methods defined on this $scope object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view. E.g., from ng-click, filters, etc.

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

Clicking the second link will reveal this and $scope are not the same, since "the scope in effect when the function was called" is the scope associated with the ChildCtrl. So here, this is set to ChildCtrl's $scope. Inside the method, $scope is still the ParentCtrl's $scope.

I try to not use this inside of a function defined on $scope, as it becomes confusing which $scope is being affected, especially considering that ng-repeat, ng-include, ng-switch, and directives can all create their own child scopes.

Answer 3

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

• $scope is not just for accessing to properties or functions in the $rootScope. Example (not too often, by the way): Suppose you need to update a DOM element not in the angular way, it means updating it through any external library which modifies the component value (visually), but the ng-model of the component doesn't get updated and you need it to! What to do? Simple: $scope.$digest (depending on what you do, there might be any other angular function required).

should I move everything to controller's this?

• No, you don't! Actually it is not a good idea to do that. Why? When you move everything to the controller's this, you are providing access to that "everything" from the view, which is impractical, since you don't need in the view everything is declared in the controller. In the controller sometimes (most of the time) you have variables and functions used just as complementary to others functions and variables (kind of private stuff): that should be kept "private", inside the controller. See 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, then what should stay in the $scope?

What you put in your $scope is completely up to you, as it is using the controller as syntax, but keep in mind that everything in the $scope is accessible in the view. The idea is to reduce the amount of variables passed to the view. This could not be noticeable in small webapp, but when the size of the app gets greater you can notice some changes (more time loading, etc).

This is a matter of perspective of each developer and how fond could be any of us of using best practices.