Estoy desarrollando una aplicación usando angularJs y nodejs. Me llamó la atención establecer el nombre del controlador en el valor de una variable del controlador principal. Para explicarlo mejor, mi index.html se ve así:
<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>Y mi controlador principal se ve así, donde los grupos se definen así:
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); }Ahora, cuando hago clic en el botón, debería ser dirigido a un controlador en particular y este nombre de controlador debe establecerse dinámicamente en member.taskName. ¿Puede alguien por favor ayudarme con esto?
Necesita agregar algo de lógica adicional a su servicio. Por lo tanto, requerirá nuevas dependencias como: $controller , $compile , $root$scope o $scope . Y uno opcional $templateCache . Las plantillas también son opcionales.
DEMO JSFiddle
Servicio de controlador dinámico:
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)Código más específico para usted:
Directiva
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; } } })Servicio
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>espero que ayude