CODEWITHSUNDEEP
angularjs
ac360
ac360

Reputation: 7835

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

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?

Upvotes: 3

Views: 8203

Answers (1)

Hylianpuffball
Hylianpuffball

Reputation: 1561

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.

Upvotes: 7

Related Questions