AngularJS：錯誤未定義

Question

此代碼有什麼問題？我期望看到在控制檯中打印1的值，但它會拋出一個錯誤，指出self.list [0]是未定義的？

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> 
</script> 
<script type="text/javascript"> 
    angular.module('notesApp', []) 
     .controller('MainCtrl', ['ItemService', function(ItemService) { 
      var self = this; 
      self.list = function() { 
       return ItemService.list(); 
      }; 

      console.log(self.list[0].id); //<<-- why does it print undefined?? 

      self.add = function() { 
       ItemService.add({ 
        id: self.list().length + 1, 
        label: 'Item ' + self.list().length 
       }); 
      }; 

     }]) 
     .factory('ItemService', [function() { 
      var items = [ 
       {id: 1, label: 'Item 0'}, 
       {id: 2, label: 'Item 1'} 
      ]; 
      return { 
       list: function() { 
        return items; 
       }, 
       add: function(item) { 
        items.push(item); 
       } 
      }; 



     }]);  

預先感謝任何回答問題的人。此外，試圖不要這麼生硬，但SO不會讓我在問題開始時提出一個簡單的問候...

Answer 1

因爲在這一點上self.list是一個功能！當執行以下，

self.list = function() { 
    return ItemService.list(); 
}; 

正如您所期望的列表那裏，也許您需要執行的功能 - 像

self.list = function() { 
    return ItemService.list(); 
}(); 

嘗試簡單！

console.log("see self.list=", self.list);