What is the purpose of assigning controller variables to "this" in AngularJS?

Question

What is the purpose of assigning controller variables to "this" in AngularJS?

Currently, I am analyzing an example in CodeSchool's "Staying Sharp with Angular" course in section 1.5. Here is the code snippet:

angular.module('NoteWrangler')
.controller('NotesIndexController', function($http) {
    var controller = this;
    $http({method: 'GET', url: '/notes'}).success(function(data){
        controller.notes = data;
    })
 });

I have gone through Mozilla's developer network guide related to [this][1], but my comprehension is still not optimal.

In the line from the above example:

var controller = this;

Why are we assigning controller = this? Why not simply declare var controller;? Is it because by equating it to this, we are making it a global variable rather than just a local one that would only be modified inside the success callback of the controller?

If needed, they later make use of the following in the HTML:

<div class="note-wrapper">
    <a class ="card-notes" ng-repeat="notes in indexController.notes">
    </a>
</div>

javascript angularjs this

Answer 1

Answer №1

Why not simply declare var controller;?

The reason is that having just var controller; would result in controller being undefined.

var controller;
document.querySelector('pre').innerHTML = controller;

<pre></pre>

Is setting it equal to this turning it into a global variable?

No, you are not creating a global variable but rather a closed over variable. This allows you to utilize the value in your callback function. To access the value in a callback, you need to either create a closure variable or bind the function.

var controller = {
  hello: 'world'
};

// Example using a callback
setTimeout(function() {
  console.log(this);
}, 0);

// Utilizing a closure variable
setTimeout(function() {
  console.log(controller);
}, 0);

// Binding a function
setTimeout(function() {
  console.log(this);
}.bind(controller), 0);

Answer 2

Why not simply declare var controller;?

The reason is that having just var controller; would result in controller being undefined.

var controller;
document.querySelector('pre').innerHTML = controller;

<pre></pre>

Is setting it equal to this turning it into a global variable?

No, you are not creating a global variable but rather a closed over variable. This allows you to utilize the value in your callback function. To access the value in a callback, you need to either create a closure variable or bind the function.

var controller = {
  hello: 'world'
};

// Example using a callback
setTimeout(function() {
  console.log(this);
}, 0);

// Utilizing a closure variable
setTimeout(function() {
  console.log(controller);
}, 0);

// Binding a function
setTimeout(function() {
  console.log(this);
}.bind(controller), 0);

Answer 3

Answer №2

Utilizing the this keyword to assign variables enables the addition of new namespaces when implementing the controllerAs pattern.

function FirstController() {
    this.message = "hello";
}

function SecondController() {
    this.message = "world";
}

HTML:

<div ng-controller="FirstCtrl as ctrl1">
    {{ctrl1.message}}
    <div ng-controller="SecondCtrl as ctrl2">
        {{ctrl2.message}}
    </div>
</div>

In the absence of utilizing controllerAs, resorting to using $parent is deemed undesirable. Imagine having to traverse through multiple levels like $parent.$parent.$parent.someData.

For more information, check out:

Answer 4

Utilizing the this keyword to assign variables enables the addition of new namespaces when implementing the controllerAs pattern.

function FirstController() {
    this.message = "hello";
}

function SecondController() {
    this.message = "world";
}

HTML:

<div ng-controller="FirstCtrl as ctrl1">
    {{ctrl1.message}}
    <div ng-controller="SecondCtrl as ctrl2">
        {{ctrl2.message}}
    </div>
</div>

In the absence of utilizing controllerAs, resorting to using $parent is deemed undesirable. Imagine having to traverse through multiple levels like $parent.$parent.$parent.someData.

For more information, check out:

Answer 5

Answer №3

Is it necessary to set the value of this as a global variable in order to avoid just changing its own local controller variable in the success callback?

The behavior of this is determined by how a function is invoked.

Each new function call results in a unique value for this within that function.

By storing the value in another variable, the inner function can access and utilize it since it doesn't have direct access to the same this.

Although not technically considered global, it resides within a broader scope as a reusable variable.

Answer 6

Is it necessary to set the value of this as a global variable in order to avoid just changing its own local controller variable in the success callback?

The behavior of this is determined by how a function is invoked.

Each new function call results in a unique value for this within that function.

By storing the value in another variable, the inner function can access and utilize it since it doesn't have direct access to the same this.

Although not technically considered global, it resides within a broader scope as a reusable variable.

What is the purpose of assigning controller variables to "this" in AngularJS?

Answer №1

Answer №2

Answer №3

Similar questions

Using ng-repeat within another ng-repeat allows elements to be displayed as siblings

Utilizing regular expressions in Javascript to retrieve multiple instances

Setting a condition for a function call when a checkbox is clicked

Sort out videos for display based on a property in JSON using AngularJS

React Component that closes when it loses focus

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

Oops! Next.js Scripts encountered an error: Module '../../webpack-runtime.js' cannot be located

Leveraging promises to make Ajax calls without repeating code

New data field is created with AngularFire2 update instead of updating existing field

Using HTML in jQuery or JavaScript: A Step-by-Step Guide

Discover the pixel width of a Bootstrap grid row or container using JavaScript

Saving a Coordinated Universal Time and showcasing it in the corresponding local timezone

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

What is the best way to access and process data from an $http request in a controller using a service

Select elements in jQuery using both a specific selector and a negative selector

Updating parent controllers in Angular 1.5 components via ngRoute

What is the process for including an additional button in the DateTimePicker feature of material UI?

Navigate array in vue-chart.js

Ensuring the canvas fits perfectly within its parent div

Error message thrown by a React custom hook: "Error: Queue is missing. This is probably a bug within React. Please report this issue."