Setting an ng controller dynamically from a variable value

Question

I am developing an application using angularJs and nodejs. I was struck by setting the controller name to the variable value from the main controller. To explain this better, my index.html looks like this:

<tbody ng-repeat="group in groups"> <tr ng-repeat="member in group.members" > <td rowspan="{{group.members.length}}" ng-hide="$index>=0"> </td> <td>{{member.taskName}}</td> <td><div class={{group.colorMe[0]}}>{{member.env}}</div> <button class="btn btn-info" ng-controller="member.taskName" ng-click="test( member.taskName , 'env', group.colorMe[0])">Sanity</button> </td> 

And my main controller looks like this when groups are defined as follows:

  var tasks =['task1','task2','task3','task4','task5']; for(i=0;i<tasks.length;i++) { var group = { "id" : i+1, "members" : [{ "taskName":tasks[i].toUpperCase(), "env1":versionMap["env1"+tasks[i]], "env2":versionMap["env2"+tasks[i]], "env3":versionMap["env3"+tasks[i]] }] }; $scope.groups.push(group); } 

Now, when I click the button, I should be bound to a specific controller, and this controller name should be dynamically set in member.taskName. Can someone please help me with this?

Answer 1

You need to add additional logic to your service. Therefore, new dependencies will be required, such as: $controller , $compile , $root$scope or $scope . And an optional one is $templateCache . Templates are also optional.

Demo jsfiddle

Dynamic Controller Service:

 var controllerTemplate = $templateCache.get(params.templateUrl); // getting inline template string var templateScope = $rootScope.$new(true); // creating new scope for future controlelr var templateCtrl = $controller(dynamicControllerName, { // creating controller $scope: templateScope // locals stuff that inject in controller }); var dynamicControllerElement = angular.element(controllerTemplate); // wrapping template into element dynamicControllerElement.children().data('$ngControllerController', templateCtrl); // inject controller into element var compiled = $compile(dynamicControllerElement)(templateScope); // compile all together $('.container').html(compiled); // putting compiled into DOM (jQuery example) 

More specific code for you:

Directive

  app.directive('dynamicControllerButton', function(dynamicControllerService){ return { restrict: 'E', scope: { controllerName: '=' }, template: '<button class="btn btn-info">Sanity</button>', //added this comma link: function(scope, elem, attrs) { dynamicControllerService.createController(scope.controllerName, elem); // we passing also element; } } }) 

Service

 app.service('dynamicControllerService', function($rootScope, $controller, $compile){ this.createController = function(dynamicControllerName, element) { // all that stuff in example above element.html(compiled); // adding compiled controller in element example ; } }) 

HTML

  <tr ng-repeat="member in group.members" > <td rowspan="{{group.members.length}}" ng-hide="$index>=0"> </td> <td>{{member.serviceName}}</td> <td><div class={{group.colorMe[0]}}>{{member.env}}</div> <dynamic-controller-button> data-controller-name="dynamic_set_controller" ng-click="test( member.serviceName , 'env', group.colorMe[0])"></dynamic-controller-button> </td> 

I hope this helps