2016-01-07 33 views
0

我想要建立一個簡單的電話本的Web應用程序,以幫助我學習的角度,我堅持了這個錯誤的特性「推」 - 無法讀取未定義的錯誤的特性「推」。 任何人都可以指出有什麼不對?AngularJS無法讀取未定義的錯誤

是目標變量,否則我試圖把源的錯誤?

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>

+1

這是因爲你在另一個控制器定義你的變量'bookCtrl.contacts' – messerbill

回答

0
<form ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(bookCtrl.contacts)" novalidate> 

bookCtrl因爲你沒有在這裏定義OU它的邊緣。與你做一個類似的代碼undefined.something角不會觸發任何錯誤。所以,你只是有一個不確定值contacts,當你在addContact進入。

+0

無法相信我忽視了,太感謝你了! – Tim

相關問題