AngularJS models, multiple $scopes, and two-way data binding

Question

I like that AngularJS doesn't require and special syntax for Models, but there's one scenario I can't seem to wrap my head around. Take the following

My dataService wraps whatever flavor of data storage I'm using:

app.factory('dataService', function() {
    var data = 'Foo Bar';

    return {
        getData: function() {
            return data;
        }
    };
});

I have two controllers that both access the same piece of data:

app.controller('display', function($scope, dataService) {
    $scope.data = dataService.getData();
});

app.controller('editor', function($scope, dataService) {
    $scope.data = dataService.getData();
});

If I then have two views, one of which modifies the data, why doesn't the other update automatically?

<div ng-controller="display">
<p>{{data}}</p>
</div>

<div ng-controller="editor">
<input type="text" value="{{data}}"/>
</div>

I understand how this is working in something like Knockout where I'd be forced to make the data a knockout observable object. So any modifications in one part of the application trigger subscriptions and update views in another. But I'm not sure how to go about it in Angular.

Any advice?

if data is object scopes will share reference to same object, when data is primitive, they retain value independently — charlietfl
– charlietfl, Commented Apr 1, 2013 at 3:33
issue is not angular related, is the way javascript works jsfiddle.net/uGdEc — charlietfl
– charlietfl, Commented Apr 1, 2013 at 3:53
@charlietfl Exactly. When using a model layer like knockout does you're creating objects for everything that is meant to be observable. Remove that layer, and it doesn't seem to make sense how primitives could possibly be monitored (as your fiddle shows). — nicholas
– nicholas, Commented Apr 2, 2013 at 20:40

Arun P Johny · Accepted Answer · 2013-04-01 03:02:14Z

7

There are few changes that I would suggest to make it work.

change the data object from a string to object type
Use ng-model to bind the input field

HTML

<div ng-controller="display">
  <p>{{data.message}}</p>
</div>

<div ng-controller="editor">
  <input type="text" ng-model="data.message"/>
</div>

Script

app.factory('dataService', function() {
    var data = {message: 'Foo Bar'};

    return {
        getData: function() {
            return data;
        }
    };
});

Demo: Fiddle

answered Apr 1, 2013 at 3:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Royi Namir Over a year ago

off-topic , related , can u pls see my q here

Arun P Johny Over a year ago

@RoyiNamir I'll have a loot at it... but I'm not a angular expert

pgreen2 · Accepted Answer · 2013-04-01 02:57:11Z

I haven't been stuck with the same situation, but the thing that jumps out at me is what you are sticking in the scope. There was an angular video where scope was discussed. You should put model objects in the scope and not use the scope as your model object.

In your example two scopes will be created each with the string data. Since data is a string and immutable, it will be replaced in scope of editor when changed. In your example if you had dataService return an object and that object is shared between the controllers, then perhaps your problems would be resolved. Try having dataService return model of {data: data} and bind to model.data instead of data.

This is untested, but should work based on how I know angular works.

Collectives™ on Stack Overflow

AngularJS models, multiple $scopes, and two-way data binding

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related