CODEWITHSUNDEEP
javascriptangularjsthis
ngnewb
ngnewb

Reputation: 253

Why do we set controller variables equal to "this" in angular?

So I am looking at an example in codeschools staying sharp with angular in section 1.5. Heres the code:

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

I read Mozilla's developer networks guide to [this][1] but my understanding is still not great.

In the following line from the above example. 

var controller = this;

Why are we setting controller = to this? Why not just have var controller;? or is by setting it equal to this making it a global variable otherwise in the success callback that would just be changing its own local controller variable not the one declared in the controller?

They later do the following in the html if it provides any clues: 

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

Upvotes: 1

Views: 247

Answers (3)

Mike Cluck
Mike Cluck

Reputation: 32521

Why not just have var controller;?

Because that means controller would be undefined.

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

is by setting it equal to this making it a global variable

You're not creating a global variable but you are creating a closed over variable. This means that you can use that value in your callback. In order to use that value in a callback, you either need to create a closure variable or bind the function.

var controller = {
  hello: 'world'
};

// Just so we have to use a callback
setTimeout(function() {
  console.log(this);
}, 0);

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

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

Upvotes: 2

Quentin
Quentin

Reputation: 944443

is by setting it equal to this making it a global variable otherwise in the success callback that would just be changing its own local controller variable not the one declared in the controller?

The value of this depends on how a function is called.

When you have a new function, you have a new value for this inside it.

Storing it in another variable means that the inner function can read the value of that variable (since it doesn't have access to the same this).

It isn't a global though, just a variable in a wider scope.

Upvotes: 1

Kyle
Kyle

Reputation: 5557

Setting variables to this allows you to add new namespaces when using the controllerAs syntax.

function OneCtrl() {
    this.notes = "foo";
}

function TwoCtrl() {
    this.notes = "bar";
}

HTML:

<div ng-controller="OneCtrl as ctrl1">
    {{ctrl1.notes}}
    <div ng-controller="TwoCtrl as ctrl2">
        {{ctrl2.notes}}
    </div>
</div>

Without controllerAs, you'd have to make use of $parent, which is actually bad practice. Imaging having to use $parent.$parent.$parent.$parent.someValue.

Further reading: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/07/02/exploring-angular-s-controller-as-syntax-and-the-vm-variable.aspx

Upvotes: 2

Related Questions