angularjshoodie

AngularJS + Hoodie: How to do a correct data flow?

I would like to combine AngularJS and Hoodie, but I am not sure how to do it the correct way. Let's say I have a basic AngularJS controller

app.controller("c", function($scope) {
  $scope.table = [];

  $scope.onAdd = function(newEntry) {
      $scope.table.push(newEntry);
  };
});

After clicking on e.g.

<button ng-click="onAdd('test');">add</button>

Everything works as expected. But now I want to use Hoodie. Currently I am trying this:

app.controller("c", function($scope) {
  $scope.table = [];

  $scope.onAdd = function(newEntry) {
      $scope.table.push(newEntry);
  };

  hoodie.store.on('entries:add', $scope.onAdd);
});

and anywhere: hoodie.store.add("entries", tmpObject);

The onAdd() gets called and is inserted into the table array (verified in the developer console), but my html table (via ng-repeat="entry in table") is not updated.

First question: Do you know why? What do I think wrong here?

Second question: What would be a good way to combine Hoodie and AngularJS? Would it be better to $watch on the table and insert items into it and store it via Hoodie after getting a change or the other way around and add a new item to the hoodie.store and then on("entries:add") do some Angular stuff?

Thanks in advance!

Solution

  • Heyho =)

    First: If you update data-structure via an 'external' event(in this case hoodie), you need to trigger the Digest-Cycle e.g. $rootScope.$apply();

    Second: There is a hoodie-angular-plugin that is written by Elmar and me. That solved the most of your basic tasks. That would be the easiest way in this case.