My server can send down changes to the state of my app. When my app receives such changes, the following function is called: (note, in the actual app code, this function is not in the global scope)
function(message){
data = window.JSON.parse(message.data);
console.log(data);
for(element in data){
if(element[0] == "_"){continue;}
$scope.state[element] = data[element];
}
}
I have also tried to do this by cloning the state object, and then attaching it back onto the scope when I'm done manipulating it.
The clone function looks like this:
var clone = (function(){
return function (obj) { Clone.prototype=obj; return new Clone() };
function Clone(){}
}());
And my function receiving the data now looks like this.
function(message){
data = window.JSON.parse(message.data);
console.log(data);
var cloned = new clone($scope.state);
for(element in data){
if(element[0] == "_"){continue;}
cloned[element] = data[element];
}
$scope.state = cloned;
}
I had just an element in my controller to test this:
<div ng-controller='MainController'>
{{ state | json}}
</di>
and it just isn't updating.
Is there a different way to add/change properties of which you don't know the name in advance, so that the bindings keep working?
Are you calling $scope.$apply()
?
If your data is coming back asynchronously, chances are Angular is already done updating the UI before you update the scope. Give it a try and see if that works. If it doesn't, then we'll probably need more information.