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)">
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)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With