Can't get my service value to update after initial assignment - angularjs

Question

I am using an Angular service to keep track of the state of some buttons and whether they should be shown or not. I am having issues that after the first assignment, I cannot change the value.
app.service('EntityButtonStateService', function(){
var state = {
showDelete: false,
showNew: false
};
this.getState = function(){
return state;
};
});
In my controller:
var buttonState = EntityButtonStateService.getState();
table.on('select', function(e, dt, node, config) {
var id = getSelectedRowId(dt);
buttonState.showDelete = true; //this assignments works
buttonState.showNew = true;
});
table.on('deselect', function(e, dt, node, config) {
buttonState.showDelete = false; //this assignment does not work
buttonState.showNew = true;
});
What could I be doing wrong?

Answer 1

UPDATED:
It appears that your biggest concern is keeping your data model for button state in sync with your UI state. There are a couple ways I can think of that will help you do that. First of all, I'll note that your service seems to only track boolean values for a couple of things (showNew, showDelete, etc.). It is a highly trivial task, one best suited for scoped variables, and to abstract this into a factory would be a showcase in elegant abstractions for the sake of elegant abstractions. Also note that your UI is likely very tightly-coupled to your data model anyway, so once again abstraction here would be futile. But all this is completely obvious, which means perhaps you are trying to do something more... So for the sake of posting something useful to you, here is another suggestion (also note, a fiddle would still be useful):
-> Set your factory instance to a scoped variable:
Instead of var buttonState = EntityButtonStateService.getState();
do $scope.buttonState = EntityButtonStateService.getState();
If you're not already familiar, Angular's scope service is what provides the automatic 2-way binding--hence my earlier comment. So, this will probably work, allowing your UI to stay in sync with the values for showNew and showDelete, etc. However, sometimes updating $scope can be troublesome (i.e. if your updates happen late in a digest cycle). At the first sign of trouble, I'll wrap my updates in a $timeout, which will push the updates to the next digest, and that usually does the trick.
Good luck.
OLD:
Try returning an object instance:
app.service('EntityButtonStateService', function(){
var state = function(){
this.showDelete = false,
this.showNew = false
};
this.getStateService = function(){
return new state();
};
});
And then you should be able to operate directly on the values of the returned service instance.
OR
If you want to track the state inside the service, then add getter and setters to the individual values. For example, a generic approach would look like this:
app.service('EntityButtonStateService', function(){
var state = {
showDelete: false,
showNew: false
};
this.get = function(item){
return state[item];
};
this.set = function(item, value){
state[item] = value;
};
});
Then you could use this code elsewhere:
// To set:
buttonState.set('showDelete', true);
// To get:
buttonState.get('showDelete'); // returns true