javascript - 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);
                }
            };



        }]);    

提前感谢所有回答的人。另外，我试图不那么直率，但不允许我在问题的开头加上简单的问候......

Answer 1

因为此时 self.list 是一个函数!当执行以下命令时，

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

由于您期望那里有一个列表，也许您需要执行该函数 - 类似于

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

简单地尝试一下!

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