从variables值dynamic设置ng-controller

我正在开发一个应用程序使用angularJs和nodejs。 我把控制器的名字设置为主控制器的variables的值。 为了更好地解释它，我的index.html如下所示：

<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> 

而我的主控制器看起来像这样的组定义如下：

  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); } 

现在，当我点击button，我应该直接到一个特定的控制器，这个控制器名称需要dynamic设置为member.taskName。 有人可以帮我这个吗？

Answer 1

您需要为您的服务添加一些额外的逻辑。 所以它将需要新的依赖项，例如： $controller ， $compile ， $root$scope或$scope 。 并可选一个$templateCache 。 模板也是可选的。

DEMO JSFiddle

dynamic控制器服务：

 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) 

更具体的代码给你：

指示

  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; } } }) 

服务

 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> 

我希望这会有所帮助