What is the difference between using $scope and this in controllers?

Question

I googled around a lot, but I can't understand why sometimes people use $scope in controllers and sometimes else this. I mean, what is the difference between:

angular.module('app').controller('MyCtrl', function($scope) {

    // this
    $scope.s_my_int = 12;
    $scope.s_myFunction = function() { alert("I'm a function!") };
    $scope.$on('user.login', function () { alert("Welcome!"); }

    // and
    this.t_my_int = 12;
    this.t_myFunction = function() { alert("I'm a function!") };
    $scope.$on('user.login', function () { alert("Welcome!"); }
}

See http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — ROMANIA_engineer, Aug 22 '14 at 16:40

score 1 · Answer 1 · answered Aug 22 '14 at 16:42

The scope is the object that is made available to the view. The view can use Angular binding expressions, and these expressions are evaluated on the scope:

<div ng-controller="MyCtrl">
    {{ s_my_int }} // will display 12

    {{ t_my_int }} // won't display anything: the scope doesn't have a t_my_int property
</div>

Some people, however, prefer exposing the controller itself to the scope. This is possible using the controller as syntax:

<div ng-controller="MyCtrl as foo">
    {{ s_my_int }} // will display 12

    {{ foo.t_my_int }} // will display 12
</div>

It's a matter of preferences. I personally prefer using the scope, because it avoid the many JS problems related to the handling of this. The advantage of the controller as syntax is that it allows telling from which controller you get values and call functions, when controllers are nested, instead of relying on scope inheritance.

What is the difference between using $scope and this in controllers?

1 Answers1