current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
1

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?

share|improve this question
1  
if data is object scopes will share reference to same object, when data is primitive, they retain value independently – charlietfl Apr 1 '13 at 3:33
2  
issue is not angular related, is the way javascript works jsfiddle.net/uGdEc – charlietfl Apr 1 '13 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 Apr 2 '13 at 20:40
up vote 6 down vote accepted

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

  1. change the data object from a string to object type
  2. 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

share|improve this answer
    
off-topic , related , can u pls see my q here – Royi Namir Jan 1 '14 at 9:04
1  
@RoyiNamir I'll have a loot at it... but I'm not a angular expert – Arun P Johny Jan 1 '14 at 9:10
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.