0

Following this thread AngularJS UI router named views lazy loading, I wanting to have numerous tabs, with each one assigned it's own template and controller, like so:

angular.module('ppApp').config(function($stateProvider){
    $stateProvider
    .state('portfolio.patent', {
        url: '/:patentId',
        controller: 'mainItemCtrl',
        templateUrl: 'app/templates/patent/main.main-item.tpl.htm'
    }
})

angular.module('ppApp').controller('maintItemCtrl', function(){
    var vm = this;
    vm.leftTabs = {
        'tab1': {
            template: 'app/templates/child.sibling1.tpl.htm',
            controller: 'siblingOneCtrl'
        },
        'tab2': {
            template: 'app/templates/child.sibling2.tpl.htm',
            controller: 'siblingTwoCtrl'
        }
    }

});


<uib-tabset active="active">
    <uib-tab ng-repeat="(tabName,tab) in $ctrl.leftTabs" heading="{{tabName}}">
        <div template={{tab.template}} controller="{{tab.controller}}">Loading {{tabName}} ...</div>
    </uib-tab>
</uib-tabset>

I have the controllers set up for the sibling controllers and they have worked up until attempting to dynamically loading them into tabs. The template is loading into the view, though the controllers aren't being invoked. If I check the source code the controller directives have both sibling controllers as values.

Question

Why are my controllers not being initiated?

Patrick McDermott
  • 1,220
  • 1
  • 15
  • 30

1 Answers1

1

I have never tried this, but it's likely because interpolation of expressions happens too late to access and influence the life-cycle phases where controller construction and initialisation occur.

At least, in directive controllers, interpolation occurs after $postLink, which means that by this point, all children have been linked, and its far too late in the parent's life-cycle to declare and instantiate new child controllers.

EDIT: this is confirmed by the docs:

Controller constructor function. The controller is instantiated before the pre-linking phase and can be accessed by other directives (see require attribute).