How do I assign an attribute to ng-controller in a directive's template in AngularJS? -

How do I assign an attribute to ng-controller in a directive's template in AngularJS? -

i have custom attribute directive (i.e., restrict: "a") , want pass 2 expressions (using {{...}}) directive attributes. want pass these attributes directive's template, utilize render 2 nested div tags -- outer 1 containing ng-controller , inner containing ng-include. ng-controller define controller exclusively used template, , ng-include render template's html.

an illustration showing relevant snippets below.

html:

<div ng-controller="appcontroller"> <custom-directive ctrl="templatecontroller" tmpl="template.html"></custom-directive> </div>

js:

function appcontroller($scope) { // main application controller } function templatecontroller($scope) { // controller (separate main controller) exclusive utilize template } app.directive('customdirective', function() { homecoming { restrict: 'a', scope: { ctrl: '@', tmpl: '@' }, // work, not want // assigning controller explicitly template: '<div ng-controller="templatecontroller">\ <div ng-include="tmpl"></div>\ </div>' // want, won't work // assigning controller via isolate scope variable attribute /*template: '<div ng-controller="ctrl">\ <div ng-include="tmpl"></div>\ </div>'*/ }; });

it appears explicitly assigning controller works. however, want assign controller via isolate scope variable obtain attribute located within custom directive in html.

i've fleshed out above illustration little more in plunker below, names relevant directive contentdisplay (instead of customdirective above). allow me know in comments if illustration needs more commented clarification:

plunker

using explicit controller assignment (uncommented template code), accomplish desired functionality. however, when trying assign controller via isolate scope variable (commented template code), no longer works, throwing error saying 'ctrl' not function, got string.

the reason why want vary controller (instead of throwing controllers 1 "master controller" i've done in plunker) because want create code more organized maintain readability.

the next ideas may relevant:

placing ng-controller tags within template instead of wrapping around ng-include. using one-way binding ('&') execute functions instead of text binding ('@'). using link function instead of / in add-on isolate scope. using element/class directive instead of attribute directive. the priority level of ng-controller lower of ng-include. the order in directives compiled / instantiated may not correct.

while i'm looking direct solutions issue, i'm willing take workarounds accomplish same functionality , relatively simple.

i don't think can dynamically write template key using scope, within link function. can imitate quite succinctly series of built-in angular functions: $http, $controller, $compile, $templatecache.

plunker

relevant code:

link: function( scope, element, attrs ) { $http.get( scope.tmpl, { cache: $templatecache } ) .then( function( response ) { templatescope = scope.$new(); templatectrl = $controller( scope.ctrl, { $scope: templatescope } ); element.html( response.data ); element.children().data('$ngcontrollercontroller', templatectrl); $compile( element.contents() )( templatescope ); }); }

inspired this similar answer.

angularjs angularjs-directive angularjs-controller angularjs-ng-include