AngularJS: example of two-way data binding with Resource

Question

I have a view Transaction which has two sections

a.) view-transaction
b.) add-transaction

both are tied to the following 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);

  }
}

, where Transaction is a service and looks as follows

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

When i click on tab "Transaction", the route #/transactions is activated, causing it to render both sub-views a.) and b.)

The question that I have is,
- Is there a way to update the $scope.transactions whenever I add new transaction? Since it is a resource
or I will have to manually do $scope.transactions.push(transaction);

marcoseu · Accepted Answer · 2013-05-08 12:01:31Z

My very first answer so take it easy on me...

You can extend the Transaction resource to update the $scope.transactions for you. It would be something like:

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

In you controller, you would then do:

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

}

Note: You need to make sure that object you created is fully usable in $scope. I spent 30 min trying to figure why this method failed on my code and it turn out that I am generating identity code in the database. As result, all my subsequent action on added new object failed because the new object was missing the identity!!!

Narretz · Accepted Answer · 2013-05-08 07:47:33Z

There is no way to update a set of models in the scope automatically. You can push it into the $scope.transactions, or you can call a method that updates $scope.transactions with fresh data from the server. In any case, you should update the $scope in the success callback of your resource save function like this:

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

In your example, when you push the transaction, you cannot be sure that the model has been saved successfully yet.

Another tip: you can create the new Transaction before you save it, and update the model directly from your view:

$scope.newTransaction = new Transaction();

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

And somewhere in your view:

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

The ng-model directive ensures that the input is bound to the name property of your newTransaction model.

Collectives™ on Stack Overflow

AngularJS: example of two-way data binding with Resource

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related