[英]Angular directive > Dynamic controller name > Interpolate controller name
I need some help on how to pass controllers definitions to inner
directive nested in outer
directive. 我需要一些有关如何将控制器定义传递给嵌套在
outer
指令中的inner
指令的帮助。 Please see http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan for a (not)working example. 请参阅http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan了解一个(不)有效的示例。
script.js@46
as item.ctrlName
? script.js@46
作为item.ctrlName
传递的内容进行角度插值吗? controllerAs
syntax in inner
directive? inner
指令中如何使用controllerAs
语法? 1) if you need the inner directive to have the parent controller you can use the require params on the inner directive. 1)如果您需要内部指令具有父控制器,则可以在内部指令上使用require参数。 Something like this
像这样
angular.module('docsTabsExample', [])
.directive('outer', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: '...', // or template
controllerAs: 'outer',
bindToController: true, // This bind the scope with the controller object
controller: function(scope, element, attrs) {
}
}
})
.directive('inner', function() {
return {
require: '^outer',
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
controllerAs: 'inner',
bindToController: true, // This bind the scope with the controller object
templateUrl: '...', // or template
controller: function(scope, element, attrs, tabsCtrl) {
// tabsCtrl and all the methods on the outer directive
},
};
});
2) You have set controller: controller and controller is a empty function, but you can set there a function like i did before and make sure of put the bindToController: true 2)您已经设置了控制器:控制器和控制器是一个空函数,但是您可以像以前一样设置一个函数,并确保将bindToController设置为:true
I found the solution going step down (up ?) with the abstraction. 我发现解决方案随着抽象而逐步降低(向上?)。 I'm dynamically constructing the whole directive configuration object and then lazy registering it.
我正在动态构造整个指令配置对象,然后延迟注册它。
See http://plnkr.co/edit/pMsgop6u51zPLqkfWaWT 参见http://plnkr.co/edit/pMsgop6u51zPLqkfWaWT
angular.module('app', ['moduleLazyLoader'])
.controller('mainCtrl', ['$log', function ($log) {
this.list = [
{
name: 'asd',
ctrl: [
'ItemAsdCtrl',
function () {
$log.debug('ItemAsdCtrl');
}
]
},
{
name: 'xyz',
ctrl: [
'ItemXyzCtrl',
function () {
$log.debug('ItemXyzCtrl');
}
]
}
];
}])
.directive('outer', ['factoryLazyLoader', '$log', '$compile', function (factoryLazyLoader, $log, $compile) {
function controller () {}
return {
restrict: 'E',
controller: controller,
controllerAs: 'outer',
bindToController: true,
scope: {
list: '=list'
},
link: function (scope, element, attributes) {
var directives = [];
scope.outer.list = scope.outer.list.map(function (ele, idx) {
var directiveSuffix = ele.ctrl[0];
directiveSuffix[0].toUpperCase();
var directiveName = 'item' + directiveSuffix,
directiveAttrName = directiveName.split(/(?=[A-Z])/).join("-").toLowerCase();
directives.push(directiveAttrName);
factoryLazyLoader.registerDirective([
directiveName,
function () {
return {
restrict: 'E',
replace: true,
controller: ele.ctrl[1],
controllerAs: ele.ctrl[0],
bindToController: true,
template: '<div>{{' + ele.ctrl[0] + ' | json}}</div>',
scope: {
item: '=item'
}
}
}
])
return ele;
});
var tpl = '<div>';
angular.forEach(directives, function (val, idx) {
tpl += '<' + val +' item="outer.list[' + idx + ']">' + '</' + val + '>';
});
tpl += '</div>'
// debugger;
element.replaceWith($compile(tpl)(scope))
}
};
}])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.