2015-03-14 4 views
1

После отправки формы я хочу вытолкнуть эти данные в свой Firebase db, и поэтому я создаю функцию для этого (addMeeting) , Однако, при нажатии на кнопку, чтобы я получаю ошибку:«TypeError: undefined не является функцией» при попытке нажать() на Firebase

TypeError: undefined is not a function
at l.$scope.addMeeting (http://localhost:8000/js/controllers/meetings.js:10:12)

meetings.js: 10: 12 прямо, где мой $ толчок, если вы будете смотреть на мой код ниже.

Моего HTML:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Data</title> 
    <meta name="viewport" content="width=device-width, userscalable=no"> 
    <link rel="stylesheet" href="css/style.css"> 

<!-- AngularJS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="js/lib/angular/angular-route.min.js"></script> 
    <script src="js/lib/angular/angular-animate.min.js"></script> 

<!-- Firebase --> 
    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script> 

<!-- AngularFire --> 
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script> 

    <script src="js/app.js"></script> 
    <script src="js/controllers/registration.js"></script> 
    <script src="js/controllers/meetings.js"></script> 

</head> 
<body> 
<header> 
    <nav class="cf" ng-include="'views/nav.html'"></nav> 
</header> 
<div class="page"> 
    <main class="cf" ng-view></main> 
</div> 
</body> 
</html> 

Моего apps.js:

var myApp = angular.module('myApp', 
     ['ngRoute', 'firebase', 'appControllers']); 

var appControllers = angular.module('appControllers', ['firebase']); 

myApp.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/login', { 
      controller: 'RegistrationController', 
      templateUrl: 'views/login.html' 
     }). 
     when('/register', { 
      controller: 'RegistrationController', 
      templateUrl: 'views/register.html' 
     }). 
     when('/meetings', { 
      controller: 'MeetingsController', 
      templateUrl: 'views/meetings.html' 
     }). 
     otherwise({ 
      redirectTo: '/login' 
     }); 

}]) 

meetings.js -The контроллер, содержащий функцию addMeeting, которая неисправный:

myApp.controller('MeetingsController', 
    function($scope, $firebaseObject) { 

    var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings'); 
    var meetings = $firebaseObject(ref); 

    $scope.meetings = meetings; 

    $scope.addMeeting = function() { 
     meetings.$push({ 
      name: $scope.meetingname, 
      date: Firebase.ServerValue.TIMESTAMP 
     }) 
    } 

}); //MeetingsController 

мнения, что вызывается этой функцией при подаче формы:

<section class="meetings cf"> 

    <h1>Add Meetings</h1> 
    <form class="formgroup addmeeting cf" 
     name="myform" 
     ng-submit="addMeeting()" 
     novalidate> 

     <div class="inputwrapper"> 
      <input type="text" name="meetingname" placeholder="Meeting Name" 
       ng-model="meetingname" ng-required="true"> 
     </div> 
     <button type="submit" class="btn" 
      ng-disabled="myform.$invalid">+</button> 
    </form> 

    <h2>Your Meetings</h2> 
    <div class="meeting" ng-repeat="meeting in meetings"> 
     <p>{{meeting.name}}</p> 
    </div> 
</section> 

** Редактировать: ** Это как-то связано с методом .push(). Я вижу, что в последней версии angularfire/firebase это должно быть .push, а не. $ Push, объявление изменилось, но это не решает мою проблему. Я вернул AngularFire и Firebase в версии 0.8.2 и 1.0.21 соответственно, повторно представил .asObject() и $ push, и все работает нормально. Я не понимаю, почему .push() не работает со всеми последними (Firebase 2.2.2, AngularFire 1.0).

+0

использование '.push' вместо' $ push' –

+0

Это не помогло решить проблему, к сожалению. – minervadreaming

ответ

2

библиотека AngularFire Firebase имеет два основных типа: $firebaseObject и $firebaseArray (экземпляр через $asObject и $asArray соответственно в версиях AngularF до версии 1.0 IRE).

Вы используете неправильный тип и неправильный метод. Цитирую AngularFire's documentation on its array type:

Synchronized arrays should be used for any list of objects that will be sorted, iterated, and which have unique IDs. The synchronized array assumes that items are added using $add() , and that they will therefore be keyed using Firebase push IDs.

Итак:

var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings'); 
    var meetings = $firebaseArray(ref); 

    $scope.meetings = meetings; 

    $scope.addMeeting = function() { 
     meetings.$add({ 
      name: $scope.meetingname, 
      date: Firebase.ServerValue.TIMESTAMP 
     }) 
    } 
+0

При изменении типа Array и использования $ add работает, я не уверен, что это правильно для этого. Причина в том, что если это приложение для собраний, где объекты могут постоянно обновляться несколькими пользователями, с объектом + методом push вы имеете чистый способ получения уникальных идентификаторов во все времена (по сравнению с массивом, если это было сделано сторона клиента). Это из моего чтения руководства по лучшим практикам здесь: https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html. – minervadreaming

+2

В AngularFire 1.0 и выше, вызывая '$ firebaseArray. $ Add' - это то же самое, что и раньше. Он вызывает 'push()' за кулисами, поэтому я также цитировал и связывал официальную документацию для вас. Если вам кажется, что вы проверяете двойную проверку, соответствующая строка находится здесь в коде AngularFire: https://github.com/firebase/angularfire/blob/master/src/FirebaseArray.js#L113 –

+2

В целом, когда вы имеете дело с набором объектов, вы должны использовать '$ firebaseArray' в AngularFire для их сопоставления. Причина, по которой AngularFire называет их «массивами», объясняется тем, что именно AngularJS считает их. –

0

Вы сделали опечатку, она должна быть .push вместо $push

КОД

$scope.addMeeting = function() { 
    meetings.push({ 
     name: $scope.meetingname, 
     date: Firebase.ServerValue.TIMESTAMP 
    }) 
} 

Reference

+0

Спасибо за ответ, но я все равно получаю точно такую ​​же ошибку. Я должен сказать, что это часть курса «Построение ориентированного на данные приложения с помощью AngularJS» на Lynda.com. Рэй Виллалобос имеет его как $ push, но я не уверен, что, возможно, что-то случилось в то время, курс с ноября, но AngularFire с тех пор ушел в 1.0 по состоянию на этот месяц. – minervadreaming

Смежные вопросы