Question

我在Firebase中有以下简单数据模型：

合作伙伴
----名称
---- OrigBal

这是HTML：

<!DOCTYPE html>
<html ng-app="bastion">
<head>
    <title>Tester</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
    <link rel="stylesheet" href="css/bastion.css"/>
</head>

<body ng-controller="PartnerCtrl">

    <table class="table edit">
        <thead>
            <tr>
                <th>Name</th>
                <th>Original Balance</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(id, item) in items">
                <td><input type="text" ng-model="item.Name" ng-blur="updateItem(id)"/></td>
                <td><input type="text" ng-model="item.OrigBal" ng-blur="updateItem(id)"/></td>
                <td>
                    <a href="#" ng-click="removeItem(id)" class="navbar-link">Remove</a>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="well">
        <h4>Add Item</h4>

        <form class="form-inline" role="form" ng-submit="addItem()" novalidate>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="newItem.Name" placeholder="Name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="newItem.OrigBal" placeholder="Original Balance">
            </div>
            <button type="submit" class="btn btn-default">Add</button>
        </form>
    </div>

    <script src="/Scripts/jquery-1.9.0.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"></script>
    <script src="/Scripts/angularfire.min.js"></script>


    <script src="/Scripts/bastion.js"></script>

</body>
</html>

这是Javascript：

var app = angular.module('bastion', ['firebase']);
app.constant('FIREBASE_URI', 'https://notpublic.firebaseio.com/Partners');

app.controller('PartnerCtrl', [
'$scope', 'PartnerService', function ($scope, PartnerService) {
    $scope.newItem = { Name: '', OrigBal: 0 };
    $scope.currentItem = null;

    $scope.items = PartnerService.getItems();

    $scope.addItem = function () {
        PartnerService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { Name: '', OrigBal: 0 };
    };

    $scope.updateItem = function (id) {
        PartnerService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        PartnerService.removeItem(id);
    };
}
]);

app.factory('PartnerService', [
'$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebase(ref);

    var getItems = function () {
        return items.$asObject();
    };

    var addItem = function (item) {
        items.$add(item);
    };

    var updateItem = function (id) {
        items.$save(id);
    };

    var removeItem = function (id) {
        items.$remove(id);
    };

    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}
]);

removeItem（）函数运行正常，getItems（）工作正常，但addItem（）和updateItem（）都给出错误： TypeError - undefined不是函数

正确的值将传递回PartnerService，但这是发生错误的地方。我已经尝试重新排列脚本的加载顺序，但没有用。

我是否可能需要在这些函数中包含一个promise以确保所有数据都存在？我现在有点不知所措。

感谢您提供任何帮助。

Answer 1

我看到你正在使用不在$ firebase（ref）对象上的函数，你想将它用作$ firebase（ref）。$ asArray（），参见Angularfire api

Answer 2

再次感谢@Kato。我在服务编码方面做得不够，需要实际使用返回所有记录的函数来修改集合。而不是：

app.factory('PartnerService', [
'$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
var items = $firebase(ref);

var getItems = function () {
    return items.$asObject();
};

var addItem = function (item) {
    items.$add(item);
};

var updateItem = function (id) {
    items.$save(id);
};

var removeItem = function (id) {
    items.$remove(id);
};

return {
    getItems: getItems,
    addItem: addItem,
    updateItem: updateItem,
    removeItem: removeItem
}
}
]);

我真正需要的是：

app.factory('PartnerService', [
'$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
var items = $firebase(ref);

var getItems = function () {
    return items.$asArray();
};

var addItem = function (item) {
    getItems().$add(item);
};

var updateItem = function (id) {
    getItems().$save(id);
};

var removeItem = function (id) {
    getItems().$remove(id);
};

return {
    getItems: getItems,
    addItem: addItem,
    updateItem: updateItem,
    removeItem: removeItem
}
}
]);

还要感谢@Anna Smother注意到

return items.$asObject();

应该是

return items.$asArray();

Angular（AngularFire）typeerror undefined不是一个函数

2 个答案: