Nome do Controlador NG Dinâmico

Eu quero especificar dinamicamente um controlador baseado em uma configuração que nós carregamos. Algo assim:

...

Como faço isso em angular? Eu pensei que isso seria muito fácil, mas eu posso encontrar uma maneira de fazer isso.

O que você quer fazer é ter outra diretiva rodando antes de qualquer outra coisa ser chamada, pegar o nome do controlador de algum modelo, remover a nova diretiva e adicionar a diretiva ng-controller , depois recompilar o elemento.

Isso parece assim:

 global.directive('dynamicCtrl', ['$compile', '$parse',function($compile, $parse) { return { restrict: 'A', terminal: true, priority: 100000, link: function(scope, elem) { var name = $parse(elem.attr('dynamic-ctrl'))(scope); elem.removeAttr('dynamic-ctrl'); elem.attr('ng-controller', name); $compile(elem)(scope); } }; }]); 

Então você poderia usá-lo em seu modelo, assim:

 
{{tyler}}

com um controlador como este:

 global.controller('blankCtrl',['$scope',function(tyler){ tyler.tyler = 'tyler'; tyler.tyler = 'chameleon'; }]); 

Provavelmente existe uma maneira de interpolar o valor ( $interpolate ) do dynamic-ctrl vez de $parse lo ( $parse ), mas não consegui fazê-lo funcionar por algum motivo.

Eu estou usando em ng-repeat, então este é um código melhorado for loops e sub-objects:

Modelo:

 

Directiva:

 mainApp.directive('ngDynamicController', ['$compile', '$parse',function($compile, $parse) { return { scope: { name: '=ngDynamicController' }, restrict: 'A', terminal: true, priority: 100000, link: function(scope, elem, attrs) { elem.attr('ng-controller', scope.name); elem.removeAttr('ng-dynamic-controller'); $compile(elem)(scope); } }; }]); 

Pessoalmente, as duas soluções atuais aqui não funcionaram para mim, pois o nome do controlador não seria conhecido na primeira compilation do elemento, mas depois, durante outro ciclo de digestão. Por isso acabei usando:

 myapp.directive('dynamicController', ['$controller', function($controller) { return { restrict: 'A', scope: true, link: function(scope, elem, attrs) { attrs.$observe('dynamicController', function(name) { if (name) { elem.data('$Controller', $controller(name, { $scope: scope, $element: elem, $attrs: attrs })); } }); } }; }]);