Какова цель «этого» ключевого слова в AngularJs

Question

Я только начал изучать AngularJS и иметь проблемы с пониманием, почему это ключевое слово необходимо в этой части кода

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}} 

Почему контроллер не может получить доступ к объекту посуды без указания 'this.dishes = dishes;'

Answer 1

Это связано с проблемами, связанными с определением области.

var dishes = ... 

создает переменную, локальную для функции; который затем подвергается воздействию контроллера (и используется в шаблоне), устанавливая свойство на контроллере:

this.dishes = dishes;