What’s the difference between "this" and "$Scope"?

Asked

Viewed 2,120 times

9

In the AngularJS we use $scope to share information between the domains of a controller. There is also the syntax Controller as which allows us to use the this to the same end.

  1. With $scope:

    function MeuController($scope) {
  $scope.mensagem;
}

<div ng-controller='MeuController'>
  {{mensagem}}
</div>

  2. With this:

    function MeuController() {
  this.mensagem;
}

<div ng-controller='MeuController as vm'>
  {{vm.mensagem}}
</div>

What is the difference between the two approaches and when I should use each one?

javascript angularjs
  • 1

    There is already an equal topic only in English.... Is the reason to create this just to increase reputation? https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers

  • 1

    @djva the reason to create is to have content in Portuguese, after all this is the Stackoverflow in Portuguese. Otherwise there would be the need for the existence of this site, since most of the questions have already been answered there. Follows here an answer that clarifies a little more your doubt.

  • So if the meaning is to translate, we plagiarize content and translate it?

  • 2

    @Djava Follows the definition of plagiarism. I don’t see how a question can be an intellectual property, especially considering different audiences. Nor can I understand why someone like you, who has the necessary knowledge to conduct a survey in English, would participate in a forum in Portuguese, since practically all the answers are already available in another language. And as for your comment, feel free to open a question on meta which is aimed at doubts of this kind.

  • 1

    Translation is cool with moderation @djva, the manager of our community clarified that once already..

  • 1

    Whenever you have any questions about any conduct, it’s good to see the goal, to see what the community thinks.

Show 1 more comment

2 answers

7


Basically, both the use of $scope like the this is intended to share information between view and controller.

The difference is, when you use this, you need to use an alias for the controller in your view.

For example:

<div ng-controller="MeuController as meu"></div>

The great advantage I see in using the this, is that if you have multiple controllers inside each other, and at some point need to name variables with the same name, this alias will act as one namespace that will separate the values.

Note: When using this without the as in the view (alias setting), you can access the information via the variable $ctrl (at least that’s how it works in definition of components).

In the case of $scope you will be able to define your variables, being possible to access them immediately, without need of a "prefix" as in the case above.

Note that in some cases, you will need the $scope, even using the this. For example, in the case of a definition of a watcher manually.

controller('MeuController', function ($scope) {

    var vm = this;

    vm.name = 'Wallace';


    $scope.$watcher('vm.name', function () {

        vm.first_name = name.split(' ')[0];
    })
})

Not to mention that, among other information, the $scope contains special information such as $parent, referencing the parent controller of the current controller.

0

"$Scope", is a special angular variable, which holds the controller context data.

"this" is a reserved javascript word, which always points to the object where the method is running, if the method is in the angular controller, it is referencing the controller.

  • 2

    Okay, correct, but that’s not what he asked. There’s a way to work out the answer to answer what was asked?

  • 3

    -1. This does not answer what was asked.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.