AngularJS无法读取未定义错误的属性“推送”(AngularJS Cannot read property 'push' of undefined error)

我正在尝试构建一个简单的电话簿Web应用程序，以帮助我学习角度，我遇到了这个错误 - 无法读取未定义错误的属性'推送'。 任何人都可以指出什么是错的？

是目标变量的错误还是我想要推送的源？

JS：

    (function() {
      var app = angular.module('PhonebookApp', []);


      app.controller('BookController', function() {
        this.contacts = [{
          firstName: "Contact1",
          lastName: "LastName1",
          phone: 123123123123,
          notes: "None"
        }];
      });

      app.controller('ContactController', function() {

        //this.contact = {};
        this.contact = {
          firstName: "Tim2",
          lastName: "Last2",
          phone: 12312312312,
          notes: "notessss"
        };
        this.addContact = function(contacts) {
          contacts.push(this.contact);
        };
      });
    })(); 
  
 
 
 HTML： 
 
 
 
  
  
<section ng-controller="BookController as bookCtrl">
  <table>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Phone Number</td>
      <td>Notes</td>
    </tr>
    <tr ng-repeat="contact in bookCtrl.contacts">
      <td>{{ contact.firstName }}</td>
      <td>{{ contact.lastName }}</td>
      <td>{{ contact.phone }}</td>
      <td>{{ contact.notes }}</td>
    </tr>
  </table>
</section>
<section>
  <div class="form_addContact">
    <form ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(bookCtrl.contacts)" novalidate>
      <label>
        First Name:
        <input type="text" required ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.firstName"></input>
        <p class="inputErr" ng-show="contactCtrl.contact.firstName.$error.pattern">First name must contain letters only!</p>
      </label>
      <label>
        Last Name:
        <input type="text" ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.lastName"></input>
        <p class="inputErr" ng-show="contactCtrl.contact.lastName.$error.pattern">Last name must contain letters only!</p>
      </label>
      <label>
        Phone Number:
        <input type="number" required ng-model="contactCtrl.contact.phone"></input>
      </label>
      <label>
        Notes:
        <input type="text" ng-model="contactCtrl.contact.notes"></input>
      </label>
      <input type="submit" value="Submit" />
    </form> 
  
 
I'm trying to build a simple phonebook web app to help me learn angular and I'm stuck with this error - Cannot read property 'push' of undefined error. Can anyone point out what's wrong?
 
Is the error on target variable or the source I'm trying to push?
 
JS: 
 
 
  
  
    (function() {
      var app = angular.module('PhonebookApp', []);


      app.controller('BookController', function() {
        this.contacts = [{
          firstName: "Contact1",
          lastName: "LastName1",
          phone: 123123123123,
          notes: "None"
        }];
      });

      app.controller('ContactController', function() {

        //this.contact = {};
        this.contact = {
          firstName: "Tim2",
          lastName: "Last2",
          phone: 12312312312,
          notes: "notessss"
        };
        this.addContact = function(contacts) {
          contacts.push(this.contact);
        };
      });
    })(); 
  
 
 
HTML:
 
 
 
  
  
<section ng-controller="BookController as bookCtrl">
  <table>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Phone Number</td>
      <td>Notes</td>
    </tr>
    <tr ng-repeat="contact in bookCtrl.contacts">
      <td>{{ contact.firstName }}</td>
      <td>{{ contact.lastName }}</td>
      <td>{{ contact.phone }}</td>
      <td>{{ contact.notes }}</td>
    </tr>
  </table>
</section>
<section>
  <div class="form_addContact">
    <form ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(bookCtrl.contacts)" novalidate>
      <label>
        First Name:
        <input type="text" required ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.firstName"></input>
        <p class="inputErr" ng-show="contactCtrl.contact.firstName.$error.pattern">First name must contain letters only!</p>
      </label>
      <label>
        Last Name:
        <input type="text" ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.lastName"></input>
        <p class="inputErr" ng-show="contactCtrl.contact.lastName.$error.pattern">Last name must contain letters only!</p>
      </label>
      <label>
        Phone Number:
        <input type="number" required ng-model="contactCtrl.contact.phone"></input>
      </label>
      <label>
        Notes:
        <input type="text" ng-model="contactCtrl.contact.notes"></input>
      </label>
      <input type="submit" value="Submit" />
    </form> 
  
 

                
最满意答案
                
                    
                        <form ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(bookCtrl.contacts)" novalidate>
 
 bookCtrl在这里没有定义，因为你在它之外。 使用undefined.something这样的代码时，Angular不会触发任何错误。 因此，当您输入addContact时， contacts只有一个未定义的值。 
<form ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(bookCtrl.contacts)" novalidate>
 
bookCtrl is not defined here because you are outside of it. Angular don't trigger any error with you do a code like undefined.something. So you just have a undefined value in contacts when you enter in addContact.