遍历对象集合时,有什么方法可以动态分配 ng-controller 吗?
Is there any way to assign ng-controller dynamically when iterate over an collection of objects?
使用 angular 1.6.6 和 ui-bootstrap 2.5.0
如果操作 属性 值不为空,我正在尝试使用控制器。
我的每个选项卡的逻辑都非常不同,因此我不想将所有选项卡放在一个控制器中。这个问题有什么办法吗?
操作数
$scope.actions = [
{
slug: "basicData",
title: "Grunddata",
icon: "fa fa-table",
template: templatePath + "basicData.html",
disabled: false,
controller: null
}, {
slug: "responsible",
title: "Ansvariga",
icon: "fa fa-address-book-o",
template: templatePath + "responsible.html",
disabled: false,
controller: null
}, {
slug: "reportTime",
title: "Rapportera tid",
icon: "fa fa-clock-o",
template: templatePath + "reportTime.html",
disabled: false,
controller: "ActivityTimeReportingController"
}
];
这是我的标签集
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab ng-repeat="action in actions" index="$index+1" disable="action.disabled">
<uib-tab-heading>
<span class='{{action.icon}}'></span> {{action.title}}
</uib-tab-heading>
<div ng-include="action.template" ng-if="!action.controller" ng-controller="action.controller"></div>
<div ng-include="action.template" ng-if="action.controller"></div>
</uib-tab>
</uib-tabset>
我收到以下错误
The controller with the name 'action.controller' is not registered.
花括号没有任何区别。
我也试过使用函数:
$scope.getController = function (controllerName) {
return controllerName.ToString();
};
在我的标签集中:
<div ng-include="action.template" ng-if="!action.controller" ng-controller="getController(action.controller)"></div>
同样的错误信息
The controller with the name 'getController(action.controller' is not registered.
有什么方法可以在遍历对象集合时动态分配 ng-controller 吗?
这是一个可行的解决方案:http://jsfiddle.net/wt42nqLn/
HTML
<script type="text/ng-template" id="customControllerTemplate.html">
Controller name: {{name}}
</script>
<div ng-controller="myCtrl">
<div ng-repeat="controller in controllerList">
<div custom-controller="controller.name">
<div ng-include="'customControllerTemplate.html'"></div>
</div>
</div>
</div>
JS
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', myCtrl);
myApp.controller('firstController', firstController);
myApp.controller('secondController', secondController);
myApp.directive('customController', customController);
function myCtrl($scope) {
$scope.controllerList = [
{
name: 'firstController'
},
{
name: 'secondController'
}
]
}
function firstController($scope){
console.log('firstController','loaded');
$scope.name = 'firstController';
}
function secondController($scope){
console.log('secondController','loaded');
$scope.name = 'secondController';
}
function customController($compile){
return {
priority:1001,
terminal:true,
link: function(scope,element,attrs){
var ctrlName = scope.$eval(attrs['customController']);
element = angular.element(element.children());
element.attr('ng-controller',ctrlName);
$compile(element)(scope);
}
};
}
创建动态指令,然后为每个指令指定一个控制器,而不是使用 ng-include 滚动您自己的动态指令并绑定模板 url
http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/
如果您没有太多类型的操作.. 然后使用 ng-if 或 ng-switch 并使用 ng-controller 或使用控制器的指令为每个操作创建一行。你试图实现的动态代码不是正确的方法,imo。
使用 angular 1.6.6 和 ui-bootstrap 2.5.0
如果操作 属性 值不为空,我正在尝试使用控制器。
我的每个选项卡的逻辑都非常不同,因此我不想将所有选项卡放在一个控制器中。这个问题有什么办法吗?
操作数
$scope.actions = [
{
slug: "basicData",
title: "Grunddata",
icon: "fa fa-table",
template: templatePath + "basicData.html",
disabled: false,
controller: null
}, {
slug: "responsible",
title: "Ansvariga",
icon: "fa fa-address-book-o",
template: templatePath + "responsible.html",
disabled: false,
controller: null
}, {
slug: "reportTime",
title: "Rapportera tid",
icon: "fa fa-clock-o",
template: templatePath + "reportTime.html",
disabled: false,
controller: "ActivityTimeReportingController"
}
];
这是我的标签集
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab ng-repeat="action in actions" index="$index+1" disable="action.disabled">
<uib-tab-heading>
<span class='{{action.icon}}'></span> {{action.title}}
</uib-tab-heading>
<div ng-include="action.template" ng-if="!action.controller" ng-controller="action.controller"></div>
<div ng-include="action.template" ng-if="action.controller"></div>
</uib-tab>
</uib-tabset>
我收到以下错误
The controller with the name 'action.controller' is not registered.
花括号没有任何区别。
我也试过使用函数:
$scope.getController = function (controllerName) {
return controllerName.ToString();
};
在我的标签集中:
<div ng-include="action.template" ng-if="!action.controller" ng-controller="getController(action.controller)"></div>
同样的错误信息
The controller with the name 'getController(action.controller' is not registered.
有什么方法可以在遍历对象集合时动态分配 ng-controller 吗?
这是一个可行的解决方案:http://jsfiddle.net/wt42nqLn/
HTML
<script type="text/ng-template" id="customControllerTemplate.html">
Controller name: {{name}}
</script>
<div ng-controller="myCtrl">
<div ng-repeat="controller in controllerList">
<div custom-controller="controller.name">
<div ng-include="'customControllerTemplate.html'"></div>
</div>
</div>
</div>
JS
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', myCtrl);
myApp.controller('firstController', firstController);
myApp.controller('secondController', secondController);
myApp.directive('customController', customController);
function myCtrl($scope) {
$scope.controllerList = [
{
name: 'firstController'
},
{
name: 'secondController'
}
]
}
function firstController($scope){
console.log('firstController','loaded');
$scope.name = 'firstController';
}
function secondController($scope){
console.log('secondController','loaded');
$scope.name = 'secondController';
}
function customController($compile){
return {
priority:1001,
terminal:true,
link: function(scope,element,attrs){
var ctrlName = scope.$eval(attrs['customController']);
element = angular.element(element.children());
element.attr('ng-controller',ctrlName);
$compile(element)(scope);
}
};
}
创建动态指令,然后为每个指令指定一个控制器,而不是使用 ng-include 滚动您自己的动态指令并绑定模板 url
http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/
如果您没有太多类型的操作.. 然后使用 ng-if 或 ng-switch 并使用 ng-controller 或使用控制器的指令为每个操作创建一行。你试图实现的动态代码不是正确的方法,imo。