"TypeError: undefined is not a function" when trying to push() to Firebase

"TypeError: undefined is not a function" when trying to push() to Firebase

提交表单后,我想将该数据推送到我的 Firebase 数据库,因此我正在创建一个函数来执行此操作 (addMeeting)。但是,按下按钮提交后出现错误:

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

meetings.js:10:12 就在我的 $push 所在的位置,如果您在下面查看我的代码。

我的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 - 包含失败的 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,ad 已经更改了它,但它并没有解决我的问题。我分别将 AngularFire 和 Firebase 恢复到版本 0.8.2 和 1.0.21,重新引入了 .asObject() 和 $push,一切正常。我不明白为什么 .push() 在所有最新版本(Firebase 2.2.2、AngularFire 1.0)上都失败了。

你打错了,应该是.push而不是$push

代码

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

Reference

Firebase 的 AngularFire 库有两种主要类型:$firebaseObject$firebaseArray(在 AngularFire 1.0 之前的版本中分别通过 $asObject$asArray 实例化)。

您使用了错误的类型和错误的方法。引用 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
        })
    }