AngularJS: Nested Controllers and Models

Question

I'm learning how to use AngularJS by building a small app. I'm a little confused about controllers and models. I have 3 controllers, 2 of which are nested.

<div ng-controller="Controller1 as Ctrl1">
    <div ng-controller="Controller2 as Ctrl2">
        <div ng-controller="Controller3 as Ctrl3">
        </div>
    </div>
</div>

I am using a different model for each controller to display data. All of the data is related in one way or another, so I am wondering if I should be using one model instead. And if so, where should it be defined?

For example, one controller might look like

(function() {

    angular
        .module('app')
        .controller('Controller1', Controller1);

    function Controller1() {

        this.data = data;
    }

    var data = [    
        {
            name: 'DATA 5',
        },
        {
            name: 'DATA 6',
        },
        {
            name: 'DATA 7',
        }
    ];
})();

where the model is defined in data. The other controllers would have models with different names.

You should probably just use one service for all of the controllers to use so you an share data between controllers. — Rob
– Rob, Commented Jul 21, 2015 at 18:33
@Brant Some of the data in the lowest-nested controller changes every 10 seconds. Some data in the grandparent controller only changes every 60 seconds, but this data is not shared. Most of the changing data is in the lowest-nested child. — UltraSonja
– UltraSonja, Commented Jul 21, 2015 at 18:35
@Rob That's a good idea. It's just every example I have looked at so far has included the model in the controller. So I didn't know if that was a best practice or just for newbie simplicity. — UltraSonja
– UltraSonja, Commented Jul 21, 2015 at 18:37
The model in the controller is fine, but services are singletons so they'll persist the data. — Rob
– Rob, Commented Jul 21, 2015 at 18:53

Brant · Accepted Answer · 2015-07-21 18:39:44Z

1

Since you have related data that is shared (or not) and constantly changing every 10-60 seconds, I'd suggest using a single service. Within that service, instantiate however many data sets you need with matching getters/setters.

Services persist data so as one controller modifies the data in the service, the other controllers utilizing that service have access to the same updated data as well.

answered Jul 21, 2015 at 18:39

Brant

1,78811 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Nested Controllers and Models

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related