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

Display animated GIFs in the popular 9Gag format

Is there a way to ensure that clicking a link_to only opens a partial once?

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

Connect jQuery's resizable controls

How can I set the value of scope on a click event in Angular?

Maintain Open State of Toggle Drop Down Menu

Issue with VueJS where changes made to properties in the mounted hook do not properly trigger the

Support for h264 in Windows Media Player across various versions of Windows operating system

Interactive hover text appears when you mouse over the SVG path

Maximizing the worth of itemtype using jQuery: A guide

The parameters for Vue.js @change events are consistently returning as 0 whenever a file is uploaded by clicking on the picture

Incorporating D3.js into Angular 6 for interactive click events

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

I am looking to implement a dropdown menu that appears after clicking on an image. Any suggestions on how to achieve this using

Troubleshooting Ng-Idle problem across multiple browser tabs

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

Setting references to child components with VueRouter in Vue

Guide on grabbing characters/words typed next to # or @ within a div element

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

Why does my element appear to be a different color than expected?