Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularFire does not update Firebase sometimes

The controller below feeds a view with a table and a form. The relevant part of the table is:

<tr ng-repeat="obj in tab.col | filter:filterObj" ng-click="select(obj)" ng-class="isSelected(obj)">

If a row gets clicked, the form displays the details of the obj (its model is tab.obj), and you can edit it. The table gets the update appropiately when the user modifies an obj in the form fields, but firebase does not get any updates but additions of new objects (this is done with an array.push(obj) ).

define(['app'], function(app) {
app.controller('LinksCtrl',['$scope', '$filter', '$http','angularFire','angularFireAuth', function($scope,$filter,$http, angularFire, angularFireAuth) {
$scope.links = {};
$scope.tabs = [];

var url = "https://<url>.firebaseio.com/links";
angularFireAuth.initialize(url, {scope: $scope, name: "user", path: "/"});
var promise = angularFire(url, $scope, 'links', {})

$scope.select = function (item) {
  for(i in $scope.tabs) {
    var tab = $scope.tabs[i];
    if (tab.active) {
      tab.obj = item;
      if (tab.obj.selected) {
        tab.obj.selected = ! tab.obj.selected;
      } else {
        tab.obj.selected = true;
        // $scope.$apply();
      }
    }
  }
};

$scope.isSelected = function(obj) {
  if (obj.selected && obj.selected === true) {
   return "active"; 
  }
  return "";
}


promise.then(function() {

  $scope.tabs.push({
    title: 'links',
    disabled: false,
    active: false,
    col: $scope.links.open, //this is an array of objects
    obj: {}
  });

  $scope.tabs[0].active = true;

  for(i in $scope.tabs) {
    var tab = $scope.tabs[i];
    tab.actions = app.actions();

    // app.actions returns an array with more objects like the following doing CRUD and other basic stuff
    tab.actions.push({
      name: 'Delete link',
      icon: 'icon-minus',
      cond: function(tab) { if ('selected' in tab.obj) { return tab.obj.selected}; return false; },
      func: function(tab) {
        // splice tab.col or whatever modification
      }
    });
  };
});
  }]);

});

How can i make something like this work? should a turn to manual sync via collections? debuging with console.log shows the object obj has what it is supposed to have in all stages of the code (it has the prototype, the hashcode, etc.) , it is just that the firebase does not get the updates.

Update:

I have a solution that works. Seems it is a binding problem, or something like that, but i'm not sure what's going on. The assignment of tabs[i].col = $scope.links.i looks like the culprit (in this case i = 'open' :-?. It might be my usage of angular.

controller scope ------

    // get the firebase data and store it in 
    var promise = angularFire(url, $scope, 'links', {})

    // build the tabs structure, where tabs[i].col = $scope.links.i

    // build actions for each tab

    // create an empty tabs[i].obj to use in the form model

ng-repeat scope -------

    // iterate over the tab structure
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">

ng-repeat scope --------

    // Iterate over the elements, so we can select one, and edit it, updating firebase
    // If we iterate over tab.col, firebase does not get the updates, but If we iterate over
    // the original $scope.links variable, it works as expected

    <tr ng-repeat="obj in links[tab.title] | filter:filterObj | orderBy: 'date':true" ng-click="select(obj)" ng-class="isSelected(obj)">
like image 528
Gabriel Díaz Avatar asked Nov 13 '22 00:11

Gabriel Díaz


1 Answers

I have a solution that works. Seems it is a binding problem on my side. The assignment of tabs[i].col = $scope.links.i looks like the culprit (in this case i = 'open' :-?. It might be my usage of angular.

The solution is instead of using tabs[i].col, use $scope.links, that is, use a $scope variable instead of a reference to a $scope variable.

controller scope ------

    // get the firebase data and store it in 
    var promise = angularFire(url, $scope, 'links', {})

    // build the tabs structure, where tabs[i].col = $scope.links.i

    // build actions for each tab

    // create an empty tabs[i].obj to use in the form model

ng-repeat scope -------

    // iterate over the tab structure
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">

ng-repeat scope --------

    // Iterate over the elements, so we can select one, and edit it, updating firebase
    // If we iterate over tab.col, firebase does not get the updates, but If we iterate over
    // the original $scope.links variable, it works as expected

    <tr ng-repeat="obj in links[tab.title] | filter:filterObj | orderBy: 'date':true" ng-click="select(obj)" ng-class="isSelected(obj)">
like image 162
Gabriel Díaz Avatar answered Dec 11 '22 02:12

Gabriel Díaz