[英]Setting ng-controller dynamically from a variable value
I am developing an application using angularJs and nodejs. 我正在使用angularJs和nodejs开发一个应用程序。 Am struck at setting the name of the controller to the value of a variable from main controller. 我们将控制器的名称设置为来自主控制器的变量值。 To explain it better, my index.html looks like this : 为了更好地解释它,我的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>
And my main Controller looks like this where the groups are defined as this : 我的主控制器看起来像这样定义组:
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 direcrted to a particular controller and this controller name needs to be set dynamically to member.taskName . 现在,当我单击按钮时,我应该被指向特定的控制器,并且需要将此控制器名称动态设置为member.taskName。 Can someone please help me with this? 有人可以帮我这个吗?
You need to add some extra logic to your service. 您需要为服务添加一些额外的逻辑。 So it will require new dependencies such as: $controller
, $compile
, $root$scope
or $scope
. 因此它需要新的依赖项,例如: $controller
, $compile
, $root$scope
或$scope
。 And optional one $templateCache
. 并可选一个$templateCache
。 Templates are optional as well. 模板也是可选的。
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 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 it will help 我希望它会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.