What is the purpose of "this" keyword in AngularJs

Question

I've just started learning AngularJS and have a trouble understanding why this keyword is needed in this piece of code

var app = angular.module('confusionApp', []);
app.controller('menuController', function() {
  var dishes = 
      [{name: 'Uthapizza'}, 
      {name: 'Zucchipakoda'},
      {name: 'Vadonut'}, 
      {name: 'ElaiCheese Cake'}];
   this.dishes = dishes;
});

Markup:

<div class="row row-content" ng-controller="menuController as menuCtrl">
     <div class="col-xs-12">
        <ul>
           <li class="media" ng-repeat="dish in menuCtrl.dishes">
              <div class="media-left media-middle"></div>
              <div class="media-body">
                 <h2 class="media-heading">{{dish.name}}

Why can't the controller just access the dishes object without the 'this.dishes = dishes;' statement

`this` is not an [tag:angular] keyword; it is a keyword in [tag:javascript] — dnozay, Dec 16 '15 at 20:43
possible duplicate http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Rahul Kumar, Mar 03 '17 at 11:39

score 0 · Answer 1 · answered Dec 16 '15 at 20:42

0

It is because of scoping issues.

var dishes = ...

creates a variable local to the function; which is then exposed to the controller (and usable in the template) by setting a property on the controller with:

this.dishes = dishes;

answered Dec 16 '15 at 20:42

dnozay

23,846
6
82
104

What is the purpose of "this" keyword in AngularJs

1 Answers1