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

时间:2013-05-08 02:09:13

标签: angularjs angularjs-scope

我有一个视图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);

2 个答案:

答案 0 :(得分:3)

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

您可以扩展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分钟试图弄清楚为什么这个方法在我的代码上失败,结果发现我在数据库中生成了身份代码。结果,我对添加的新对象的所有后续操作都失败了,因为新对象缺少标识!!!

答案 1 :(得分: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属性。