javascript - Undefined 不是函数 [Thinkster.io 的 Angular 教程第 4 章]

Question

我正在研究 Thinkster.io 的 Angular 教程，并且玩得很开心，直到我在第 4 章中遇到了一个我无法解决的问题。每次我尝试运行“发布”或“删除”操作时，我都会得到:

TypeError: undefined is not a function
    at Object.Post.create (http://localhost:9000/scripts/services/post.js:12:20)
    at Scope.$scope.submitPost (http://localhost:9000/scripts/controllers/posts.js:9:10)
    at http://localhost:9000/bower_components/angular/angular.js:10795:21
    at http://localhost:9000/bower_components/angular/angular.js:19036:17
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12632:28)
    at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12730:23)
    at HTMLFormElement.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:19035:21)
    at HTMLFormElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4409:9)
    at HTMLFormElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4095:28)

-

这是我的app/scripts/app.js:

'use strict';
/* global app:true */

/**
 * @ngdoc overview
 * @name angNewsApp
 * @description
 * # angNewsApp
 *
 * Main module of the application.
 */

var app = angular.module('angNewsApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'firebase'
])
.constant('FIREBASE_URL', 'https://blazing-fire-1894.firebaseio.com/');
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/posts.html',
        controller: 'PostsCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

-

app/services/post.js:

'use strict';

app.factory('Post',
  function ($firebase, FIREBASE_URL) {
  var ref = new Firebase(FIREBASE_URL + 'posts');

  var posts = $firebase(ref);

  var Post = {
    all: posts,
    create: function (post) {
      return posts.$add(post);
    },
    find: function (postId) {
      return posts.$child(postId);
    },
    delete: function (postId) {
      return posts.$remove(postId);
    }
  };

  return Post;
});

-

'app/scripts/controllers/posts.js':

'use strict';

app.controller('PostsCtrl', function ($scope, Post) {
  $scope.posts = Post.all;

  $scope.post = {url: 'http://', 'title': ''};

  $scope.submitPost = function () {
    Post.create($scope.post).then(function () {
      $scope.post = {url: 'http://', 'title': ''};
    });
  };

  $scope.deletePost = function (postId) {
    Post.delete(postId);
  };

});

-

app/views/posts.html:

<div ng-repeat='(postId, post) in posts'>
  <a href='{{ post.url }}'>{{ post.title }}</a> <a ng-click="deletePost(postId)">[X]</a>
</div>

<form ng-submit='submitPost()'>
    <input type='text' ng-model='post.title' />
    <input type='text' ng-model='post.url' />
    <input type='submit' value='Add Post' />
</form>

Preview: <a href='{{ post.url }}'>{{ post.title }}</a>

-

这里是 app/index.html

中包含的脚本

<!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/firebase/firebase.js"></script>
    <script src="bower_components/angularfire/dist/angularfire.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/posts.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/services/post.js"></script>
        <!-- endbuild -->

-

如有任何帮助，我们将不胜感激!

Answer 1

由于您希望 posts 是一个数组，因此您可以添加/删除项目。

您必须更改此行:

var posts = $firebase(ref);

对此:

var posts = $firebase(ref).$asArray();

希望这有帮助。