Question

我有一个视图Transaction，它有两个部分

a。）view-transaction
b。）add-transaction

两者都绑定到以下控制器

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'
    });
  });

当我点击“交易”标签时，路线＃/ transactions被激活，导致它呈现两个子视图a。）和b。）

我的问题是，
- 每当我添加新事务时，有没有办法更新$ scope.transactions？因为它是资源
或者我将不得不手动执行$ scope.transactions.push（transaction）;

Answer 1

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

您可以扩展Transaction资源以更新$ 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;
});

在你的控制器中，你会这样做：

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

}

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

Answer 2

无法自动更新范围内的一组模型。您可以将其推送到$ scope.transactions，或者您可以使用服务器中的新数据调用更新$ scope.transactions的方法。在任何情况下，您都应该更新资源保存功能的成功回调中的$ scope，如下所示：

transaction.$save({}, function() {
    $scope.transactions.push(transaction);
    //or
    $scope.transactions = Transaction.query();
});

在您的示例中，当您推送事务时，您无法确定模型是否已成功保存。

另一个提示：您可以在保存之前创建新的交易，并直接从您的视图更新模型：

$scope.newTransaction = new Transaction();

$scope.addTransaction = function() {
    $scope.newTransaction.save( ...
}

在你看来的某个地方：

<input type="text" ng-model="newTransaction.name" />

ng-model指令确保输入绑定到newTransaction模型的name属性。

AngularJS：与Resource进行双向数据绑定的示例

2 个答案: