How To Use An Angular Controller Multiple Times On The Same Page?

Question

I am building a simple dashboard with 6 slots. Users can select the type of content they'd like to put in each slot, and they can also select the same content to be put into multiple slots. This is where the problem lies...

I'd like to architect the app so that the content template is injected dynamically into slots via ng-include, and the content template will contain a ng-controller="Content1Controller" reference to the controller for that content.

But, when adding the same content in multiple slots, the controller is re-run each time for multiple instances of content.

Since keeping track of the instances within the controller won't work since it potentially can be re-run, should I track instances in a Service, and have the controller check in with the Service each time it is run?

My question is how should I architect this, and am I thinking about this in a correct/angular-ish way?

but if you change for example a scope object from one slot and you have only one instance then you change twin slot as well isnt that a problem for you? — Poyraz Yilmaz, Mar 06 '14 at 19:20

score 7 · Accepted Answer · edited May 23 '17 at 12:33

Services are great ways to store common data in an Angular app, so that would be my first recommendation about how to architect your app.

Digging deeper, I think your decision really depends on what you're using your data for. Re-using the same service is probably fine if each slot is self-contained, and won't need to really interact much with other slots. If this is the case, then you don't even need services: each controller can simply keep its own local data copy, and everything will be fine.

For example,

angular.module('mean.root').controller('ContentA1Controller', function($scope){
    //each instance's scope will keep its own local data,
    //but other scopes won't really have access to it
    $scope.data = [1,2,3,4,5]
});

If, however, you need to share each controller's data with other elements of the page, a service can help you there.

//factory also works instead of service; use whichever you prefer
angular.module('mean.root').service('MyDataService',function(){
    this.bucket = {};

    this.saveData = function(data,id){
        this.bucket[id]=data;
    }

    this.getData = function(id){
        return this.bucket[id];
    }
});

Then your controller is declared like

<div ng-controller='MyController' number='2'>

(or, instead of 'number', any custom attribute that indentifies which instance it is) And your controller code is

angular.module('mean.root').controller('ContentA1Controller', function($scope, $attrs, MyDataService){
    //I'm skipping data setup, null checking, etc., so be sure to add those!
    $scope.data = MyDataService.getData($attrs.number);

    //do some cool stuff here!

    //Make a 'save' function to put the data back
    $scope.save = function(){
       MyDataService.saveData($scope.data, $attrs.number);
    }
});

By using a service, other controllers (and even services) can access the data each slot is using, without having to dig down and find the exact $scope of that controller.

Also, depending on how your app is set up, you may need your view to update when your service's data changes; that's very easy to do using $scope.$watch(). You can read this SO post to find out more about how to do that.

This is along the lines of what I was thinking, but you've provided a wonderful example full of useful ideas. Thank you for this :) — ac360, Mar 06 '14 at 20:31

How To Use An Angular Controller Multiple Times On The Same Page?

1 Answers1