My goal is to utilize the bootstrap.ui tabset feature with an array of tab settings. These settings include the name of the controller responsible for handling its contents in order to keep my 'tab-control' template clean and simple.
<div tabset>
<div ng-repeat="tab in tabs"
tab
active="tab.isActive">
<span tab-heading>{{ tab.title }}</span>
<span ng-inlcude="tab.templateUrl" ng-controller="tab.controller"></span>
</div>
</div>
(please note that I have not yet implemented the ng-include attribute in my code, as I was first experimenting with ng-controller.)
Initially, I attempted to use the controller's name directly... however, ng-controller did not accept this and did not function as expected.
Next, I tried translating the name to a controller using the following snippet.
for (var tabIdx = 0; tabIdx < tabs.length; tabIdx++) {
var tab = tabs[tabIdx];
if (typeof tab.controllerName == 'string') {
var childScope = tab.scope = tab.scope || $scope.$new();
childScope.someValue = 'I am created as [' + tab.controllerName + '] requested.';
tab.controller = $controller(tab.controllerName, { $scope: childScope });
}
}
However, Angular alerted me that it expected a function but received a controller instead (you would think that ng-controller wouldn't mind receiving a controller).
So, I adjusted the $controller call to:
tab.controller = $controller(tab.contollerName, { $scope: childScope }).constructor;
While this solution somewhat worked, the scope was not ideal.
As a next step, I considered providing another function to the ng-controller:
tab.controller = $controller.bind(null, tab.contollerName, { $scope: childScope });
However, the ng-controller could not locate the $injectables in this scenario.
Is there a way to make this configuration functional?