AngularJS - updating the model shared by different controllers

Question

I'm just starting with AngularJS, building my first test web app. I have several controllers that share the same model.

This is my model:

uxctModule.factory ("ModelData", function () {
   var data = {
        param1: '', 
        param2: '',
        param3: '',
        [more params....]
   }
   return data
});

So this is an example of my controller

uxctModule.controller ('PageOne', function ($scope, ModelData){
    $scope.data = ModelData;
    [do things here]
});

I'm now trying to change the model by loading a string from a file, and I was expecting the app to update accordingly. So in a controller I'm loading a file and trying to update the model:

uxctModule.controller ('NavigationController', function ($scope, ModelData) {
     $scope.data = ModelData;
     $scope.browsePressed = function (evt) {

        var f = evt.target.files[0]; 
        if (f) {
            var r = new FileReader();
            r.onload = function(e) { 
                var contents = e.target.result;
                console.log (contents);
                console.log ("ModelData was " + ModelData.param1);
                ModelData = JSON.parse(contents);
                console.log ("ModelData is now " + ModelData.param1);
            }

            r.readAsText(f);
        }
        else { 
            alert("Failed to load file");
        }
     }
});

I've built a "debugger" div in the html to see the model:

<div id="debuggerBox" ng-controller="Debugger" width='300'>
        <pre>{{data | json}}</pre>
    </div>

...whose controller is simply:

    uxctModule.controller ('Debugger', function ($scope, ModelData){
    $scope.data = ModelData;
});

Now, when changing the model content loading the external file I can see on the console the right logs (values changed), but on the debugger box the Model object is still holding the old values. As I said, I'm an AngularJS beginner, so maybe I'm doing something really wrong here. Any help is appreciated :)

Khanh TO · Accepted Answer · 2014-04-19 09:48:44Z

2

The problem is you're replacing the whole object:

ModelData = JSON.parse(contents);

with this, the ModelData references another object but the original object is not modified.

You could fix this by copying field by field to the ModelData. Sample code:

var tempModelData = JSON.parse(contents);
ModelData.param1 = tempModelData.param1;

or you could try angular.copy:

angular.copy(JSON.parse(contents), ModelData);

Also try $scope.$apply to let angular aware of the changes:

$scope.$apply(function(){
       angular.copy(JSON.parse(contents), ModelData);
});

edited Apr 19, 2014 at 9:48

answered Apr 19, 2014 at 9:40

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sr.Richie Over a year ago

while your explanation makes lot of sense - shame on me - it still doesn't work. I've tried both ways, and the debugger div is still showing me old values

Collectives™ on Stack Overflow

AngularJS - updating the model shared by different controllers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related