Instantiate other AngularJS-controller with a CommonController when using IIFE - angularjs

Question

I have a project where a lot of the models are going to be managed by almost the same controller-code with the only exception that they are calling different services.
The way I'm handling this now is by instantiating a Crud-Controller with common code into every custom controller and then redirecting the service-call by changing the variable inside the custom controller. I.e.
vm.service.get() inside the Crud-Controller changes by setting vm.service = teamService; in a custom controller.
This is how I instantiate the Crud-Controller into my custom controllers at the moment:
$injector.invoke(Crud, this, {$scope:$scope});
This works fine, however I don't know if this is the right way to share common controller code. Maybe it is possible to instantiate a service for this use? Because the question I have (if my way of doing it is correct), how do I access other controllers while using IIFE? Right now I am not using IIFE since I have not figured out a way to do so.
I have tried with angular.module('app').controller('Crud') but it does not work.
I.e: How do I get access to the PrimaryCtrl's edit function without using $injector or relying on the $scope inheritance?
http://jsfiddle.net/tcVhN/62/

Answer 1

It looks like your example uses Angular 1.0.x that supports global controllers out of the box. That's how it would be done with more recent Angular, without going too deep into the perils of JS inheritance.
'use strict';
(function (root, angular) {
root.ctrls = root.ctrls || {};
var primaryCtrl = function ($scope) {
var self = this;
console.log('primaryCtrl constructor', self, $scope);
};
primaryCtrl.prototype = {
items: ['Item 1', 'Item 2'],
edit: function (item) {
//do stuff
}
};
primaryCtrl.$inject = ['$scope'];
root.ctrls.primaryCtrl = primaryCtrl;
})(this, angular);
(function (root, angular) {
root.ctrls = root.ctrls || {};
var secondaryCtrl = function ($scope) {
var self = this;
console.log('secondaryCtrl constructor', self, $scope);
};
secondaryCtrl.prototype = angular.extend({},
root.ctrls.primaryCtrl.prototype,
{
items: ['Stuff 1', 'Stuff 2']
}
);
secondaryCtrl.$inject = ['$scope'];
root.ctrls.secondaryCtrl = secondaryCtrl;
})(this, angular);
var app = angular.module('app',[]);
app.controller('PrimaryCtrl', ctrls.primaryCtrl);
app.controller('SecondaryCtrl', ctrls.secondaryCtrl);
and
<div ng-controller="PrimaryCtrl as primary">
<p ng-repeat="item in primary.items">{{item}}</p>
</div>
<div ng-controller="SecondaryCtrl as secondary">
<p ng-repeat="item in secondary.items">{{item}}</p>
</div>
You may also check Angular Classy, which brings opinionated but viable extending syntax to Angular.