AngularJS:与 Resource 进行双向数据绑定(bind)的示例

Question

我有一个包含两个部分的 View 事务

a.) 查看交易
b.) 添加交易

两者都绑定(bind)到以下 Controller

function TransactionController($scope, Category, Transaction) {
  $scope.categories = Category.query(function() {
    console.log('all categories - ', $scope.categories.length);
  });

  $scope.transactions = Transaction.query();

  $scope.save = function() {
    var transaction = new Transaction();
    transaction.name = $scope.transaction['name'];
    transaction.debit = $scope.transaction['debit'];
    transaction.date = $scope.transaction['date'];
    transaction.amount = $scope.transaction['amount'];
    transaction.category = $scope.transaction['category'].uuid;

    //noinspection JSUnresolvedFunction
    transaction.$save();
    $scope.transactions.push(transaction);
    console.log('transaction saved successfully', transaction);

  }
}

，其中Transaction是一个服务，如下所示

angular.module('transactionServices', ['ngResource']).factory('Transaction', function($resource) {
    return $resource('/users/:userId/transactions/:transactionId', {
      // todo: default user for now, change it
      userId: 'bd675d42-aa9b-11e2-9d27-b88d1205c810',
      transactionId: '@uuid'
    });
  });

当我点击选项卡“Transaction”时，路由 #/transactions 被激活，导致它呈现 subview a.) 和 b.)

我的问题是，
- 有没有办法在我添加新交易时更新 $scope.transactions？既然是资源
或者我将不得不手动执行 $scope.transactions.push(transaction);

Answer 1

我的第一个答案，请放轻松...

您可以扩展事务资源来为您更新 $scope.transactions。它会是这样的:

angular.module( ..., function($resource) {
    var custom_resource = $resource('/users/:userId/transactions/:transactionId', {
        ...
    });

    custom_resource.prototype.save_and_update = function (transactions) {
        var self = this;
        this.$save(function () {
            transactions.push(self);
        });
    };

    return custom_resource;
});

在你的 Controller 中，你会做:

function TransactionController (...) {
    ...
    $scope.save = function () {
        ...
        // In place of: transaction.$save(), do:
        transaction.save_and_update($scope.transactions);
        ...
    }

}

注意:您需要确保您创建的对象在 $scope 中完全可用。我花了 30 分钟试图弄清楚为什么这个方法在我的代码上失败了，结果证明我在数据库中生成了身份代码。结果，我对添加的新对象的所有后续操作都失败了，因为新对象缺少身份!!!