Javascript 调用子指令上的方法的角度指令
我正在寻找如何在Angular中实现层次结构的建议,其中指令(Javascript 调用子指令上的方法的角度指令,javascript,angularjs,angularjs-directive,parent-child,Javascript,Angularjs,Angularjs Directive,Parent Child,我正在寻找如何在Angular中实现层次结构的建议,其中指令()可以调用子指令控制器()上的方法 我在这里列出了一个详细的例子: 如您所见,我的代码包含一个外部指令,,它在其中显示一个或多个指令 指令提供了一种编辑方法,editItem(),允许用户更改单个条目的值。(为了简短起见,我只需在这里分配一个随机数,但在我的生产应用程序中,会出现一个模式,向用户查询一个新值。) 这个很好用。但是,在外部指令中,我想添加创建新的空白指令的功能,然后立即调用其编辑方法,以便用户可以输入初始值。如果未输入
)可以调用子指令控制器(
)上的方法
我在这里列出了一个详细的例子:如您所见,我的代码包含一个外部指令,
,它在其中显示一个或多个
指令
指令提供了一种编辑方法,editItem()
,允许用户更改单个条目的值。(为了简短起见,我只需在这里分配一个随机数,但在我的生产应用程序中,会出现一个模式,向用户查询一个新值。)
这个很好用。但是,在外部指令
中,我想添加创建新的空白
指令的功能,然后立即调用其编辑方法,以便用户可以输入初始值。如果未输入初始值,则新项目将被丢弃
我见过一些内部指令在封闭指令上调用方法的例子,但不是相反
有办法做到这一点吗?或者,有没有更好的方法来构建这种视图?您可以始终使用$broadcast来双向对话。给你的父母和孩子。你可以使用$broadcast双向通话。对于您的父母和孩子。在您的孩子控制器中,您可以执行以下操作
app.directive('propertyValue', function() {
return {
require : '^partition'
restrict: 'E',
scope: {
item: '='
},
这样,您将在child指令的link函数中获得父控制器,如下所示
link:function(scope,element,attrs,partitionCtrl){
partitionCtrl.getChildCtrl(element)
}
在分区控制器中创建getChildCtrl函数,并使用该函数调用“propertyvalue”控制器函数
controller: function ($scope, ItemFactory) {
// your code
var propValueCtrl =undefined;
this.getChildCtrl =function(elem)
{
propValueCtrl = elem.controller();
}
this.callChildFunction = function()
{
propValueCtrl.Edit();// whatever is the name of function
}
在property link函数中需要时调用此函数
希望这有帮助。在您的儿童控制器中,您可以执行以下操作
app.directive('propertyValue', function() {
return {
require : '^partition'
restrict: 'E',
scope: {
item: '='
},
这样,您将在child指令的link函数中获得父控制器,如下所示
link:function(scope,element,attrs,partitionCtrl){
partitionCtrl.getChildCtrl(element)
}
在分区控制器中创建getChildCtrl函数,并使用该函数调用“propertyvalue”控制器函数
controller: function ($scope, ItemFactory) {
// your code
var propValueCtrl =undefined;
this.getChildCtrl =function(elem)
{
propValueCtrl = elem.controller();
}
this.callChildFunction = function()
{
propValueCtrl.Edit();// whatever is the name of function
}
在property link函数中需要时调用此函数
希望这能有所帮助。这是一个有趣的解决方案,但不幸的是,它在实践中并不奏效。我已经将您的代码集成到一个新的Plunkr中,并添加了注释(app.js:lines 52-61)来解释为什么这并不理想:对不起,我无意中删除了plnkr.co链接,无法编辑上面的注释。JSFIDLE中的代码是相同的:确保在调用子函数之前绘制指令的最简单方法是将对子函数的调用包装在
$timeout
中。这是一个有趣的解决方案,但不幸的是,它在实践中并不十分有效。我已经将您的代码集成到一个新的Plunkr中,并添加了注释(app.js:lines 52-61)来解释为什么这并不理想:对不起,我无意中删除了plnkr.co链接,无法编辑上面的注释。JSFIDLE中的代码是相同的:确保在调用子函数之前绘制指令的最简单方法是将对子函数的调用包装在$timeout
中。