Javascript 如何将组件方法共享给子组件？

我有两个部分：

被插入到DOM中，而我正在使用

$compile

创建一个

。 然后在

cmpTop

控制器中，我需要获取

并将其插入

中

插入工作正常，但我需要从

cmpOne

访问

cmpTop

控制器方法，但无法确定如何进行

到目前为止，我所尝试的是添加

require:{cmpTop:'^^'}

-由于插入之前没有父组件，因此无法工作

那么，我怎样才能做到这一点呢？我的意思是-在另一个组件中插入一些组件，并将其方法共享给添加的子组件

已更新

这是普朗克：

因此，我需要从

对话框componentcontroller

访问

PanelController

的方法

---

或者，也许我做错了——所以请给我一个正确的提示。

您可以使用一个公共服务在他们之间进行通信（正如playerone提到的）

您可以将

$scope.menuSelection.myFooFunction=…

指向一个指令中的函数，然后从另一个指令调用它。

您的代码有什么问题？ 您可以使用

.find

在这里使用类选择器，但是根据，angular只支持标记选择器

继承 根据

组件只控制自己的视图和数据：组件永远不应该修改任何超出其范围的数据或DOM。通常，在AngularJS中，可以通过作用域继承和监视修改应用程序中任何位置的数据。这是可行的，但当不清楚应用程序的哪个部分负责修改数据时，也可能导致问题这就是组件指令使用隔离作用域的原因，因此不可能对整个作用域进行操作。

那么如何分享方法呢？ @K Scandrett的答案很好，可能是最佳实践，但我最喜欢的解决方案是：

在DialogComponentController中：

$rootScope.$emit("abc"); 

$rootScope.$on("abc",function(){
    console.log("got it");
    //and do whatever you want 
});

在面板控制器中：

$rootScope.$emit("abc"); 

$rootScope.$on("abc",function(){
    console.log("got it");
    //and do whatever you want 
});

---

检查这个工作示例

var-app=angular.module（'plunker'，[]）；
PanelController.$inject=['$element']；
功能面板控制器（$element）{
var$ctrl=this；
$ctrl.showAlert=函数（）{
警报（“来自PanelController的消息”）；
};
$ctrl.close=函数（）{
//$element.remove（）；
};
$ctrl.onShow=函数（）{
};
$ctrl.$onInit=$onInit；
$ctrl.$onDestroy=$onDestroy；
函数$onInit（）{
var srcEl=angular.element（document.querySelector（$ctrl.source））；
srcEl.attr（'panel'，'$ctrl'）；
$element
.find（“.panel”）
.append（srcEl）
.css（'显示'，'块'）
);
$ctrl.onShow（）；
var bodyRect=document.body.getBoundingClientRect（），
elRect=$element[0]。getBoundingClientRect（），
职位={
左：''，
顶部：“”，
对：''，
底部：“”
};
position.top=（bodyRect.height-elRect.height）/4；//eslint禁用行无幻数
position.left=（bodyRect.width-elRect.width）/2；//eslint禁用行无幻数
$element.css（'top'，position.top+'px'）；
$element.css（'left'，position.left+'px'）；
}
函数$onDestroy（）{
}
}
函数对话框ComponentController（）{
var$ctrl=this；
$ctrl.callPanelMethod=函数（）{
var scope=angular.element（$（'ccm-panel div'））.scope（）；
作用域：$ctrl.showAlert（）；
}
$ctrl.actions={
关闭：功能（事件、按钮）{
event.preventDefault（）；
event.stopPropagation（）；
$ctrl.instance.hide（按钮）；
}
};
$ctrl.$onInit=$onInit；
$ctrl.$onDestroy=$onDestroy；
$ctrl.$onChanges=函数（）{
};
函数$onInit（）{
}
函数$onDestroy（）{
}
}
app.component（'ccmDialog'{
模板：“对话框单击此处从controll PanelController获取警报”，
控制器：DialogComponentController，
绑定：{
panel:“你能用这个添加一个plunker吗？@MarcusH，我会试试，谢谢你的关注）是html中的
，然后你用这个指令来构建
？我在你的plunker
ccmPanel
中添加了一个plunker，它不是
CCMDALOG
的孩子（反之亦然），他们是兄弟。这是故意的吗？为了帮助我更新了您的代码，我举了一个例子，当您单击面板或对话框时，调用另一个组件中的函数