AngularJS : Re-use controller functions and templates in different controllers

Question

The title is a big ambigious, but this is the problem.

Assuming I am working in AngularJS and I have several views that largely need the same logic.

Code overview

app.js

$routeProvider
.when('/sheet/:sheetid/:screenid', {
  templateUrl: 'views/sheet.html',
  name: 'sheets',
  controller: 'SheetCtrl'
});

index.html

<div class="container" ng-view></div>

The shared controller Now this is the part where it all falls down in my mind. I need this controller to work on all 10 sheets. Right now I'm loading the data/model for the sheet through a service, which is working for now. The thing is though, that every sheetid shares a lot of code, but they can also differ from one another.

For instance:

sharedController.js

angular.module('App')
    .controller('SheetCtrl', function ($scope, $routeParams, sheets) {

    $scope.sheetid = $routeParams.sheetid;

    /** GET THE SHEET */
    //Gets the correct model from the sheets service (via promise)
    $scope.sheetData = sheets.getSheet($scope.sheetId);

    /** FACTSHEET SPECIFIC LOGIC */
    //TODO: Figure out how to load specific factsheet controls in here


    /* THE LOGIC FOR ALL THE SCREENS. WE NEED THIS AT ALL TIMES */
    $scope.setScreen = function(index) {
        ...
    };
    //there are some more functions here that need to be shared
});

The view is a problem too

Every sheet has to be parsed in the same template. The problem is though that even these templates can differ tiny bits, and only from one div nested in this template. I would want to assign sheetID specific controller logic to the sheet-content, and also give the sheet-content it's own template/view.

<div class="sheet">
    <div>
        <a href="/#/" class="close">close</a>
    </div>
    <div class="sheet-content">
        <!-- Assume sheet specific controller code to target this div-->
    </div>
</div>

Now what?

Not quite sure how to continue from here. It seems like I should be able to somehow dynamically assign controller logic for specific sheetID's to the sheet-content div and assign a template here. I'm really looking for the method to do this as clean and DRY as possible.

For instance, I could copy/paste the view and sharedController 10 times and assign them to every possible path, but I really do not want to repeat myself.

Another problem is that every factsheet should build his own model somehow. Right now I am doing it through a service with predefined data, but it would be cleanest if the specific controllers are handling that. The problem is when I put that logic in the specific controllers, the sharedControllers can't use that model anymore and won't build again.

If anyone could point me in the right direction I'd be very happy about that.

Dan Kanze · Accepted Answer · 2013-06-18 14:52:36Z

2

Partials loaded inside the parent inherit parent controller:

<div ng-controller="SheetCtrl" class="container" ng-view></div>

answered Jun 18, 2013 at 14:52

Dan Kanze

18.6k28 gold badges85 silver badges136 bronze badges

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

Comments

JanTheHuman · Accepted Answer · 2013-06-19 10:09:30Z

Here's what I eventually did. I included a view in the sheet-content according to a $scopevariable. I created 10 different views. In these 10 views I only changed the ng-controller element. All these views then ng-include another view which is shared across all 10 controllers.

I'm not totally happy about loading the data for the sheet in the sheet.js controller, but for now it seems the most DRY method of working. If I can think of a way to load this data in the corresponding sheet controller I'd rather do that.

sheet.js

This controls all of the sheets, contains shared functions and loads the data

$scope.template = {
  url: '/views/sheets/sheet' + $scope.sheetid + '.html'
};

sheet.html

This view simply loads the template provided above, looking at the sheetid

<div ng-include="template.url">

sheet1.html (goes on to sheet10.html)

Simply assigns the right controller so I can seperate my code

<div ng-controller="Sheet1Ctrl">
    <div ng-include="'views/sheets/sheet-wrapper.html'"></div>
</div><!--controller-->

sheet-wrapper.html

This view is shared across all sheets. Changing this view changes all the sheets

  <div class="mpj-factsheet-dynamic"></div>

Collectives™ on Stack Overflow

AngularJS : Re-use controller functions and templates in different controllers

Code overview

The view is a problem too

Now what?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code overview

The view is a problem too

Now what?

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related