Javascript 如何从AngularJS中的父组件触发子组件中的函数？

通过在子组件中使用&binding，我们可以运行作为父组件控制器一部分的函数。我正在努力朝着相反的方向做同样的事情——当父组件中发生某些事情时，子组件运行函数

我有

mapComponent

，它是

mainComponent

的直接子级<代码>地图组件显示带有一些标记的全屏谷歌地图（使用）<代码>主组件处理登录和注册。如果用户开始注册，我需要运行

mapComponent

中的函数，删除所有标记并附加地图事件，以便用户可以单击地图以显示他是否还活着，并在注册时保存这些坐标

例如，这不会太复杂，下面是我在搜索stackoverflow时发现的代码：

var app = angular.module('plunker', []);

app.controller('RootController', function() {});

app.component('parentComponent', {
  template: `
    <h3>Parent component</h3>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Child</a>
    <span data-ng-bind="$ctrl.childMessage"></span>
    <child-component on-change="$ctrl.notifiedFromChild(count)" message="$ctrl.message"></child-component>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.notifiedFromChild = function(count) {
      ctrl.childMessage = "From child " + count;
    }
    ctrl.click = function() {
      ctrl.message = Math.random()
    }
  },
  bindings: {}
});

app.component('childComponent', {
  template: `
    <h4>Child component</h4>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Parent</a>
    <span>{{$ctrl.parentMessage}}</span>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.counter = 0;
    ctrl.click = function() {
      ctrl.onChange({
        count: ++ctrl.counter
      });
    }
  },
  bindings: {
    onChange: '&',
    parentMessage: '<message'
  }
});

var-app=angular.module（'plunker'，[]）；
app.controller（'RootController'，function（）{}）；
app.component（'parentComponent'{
模板：`
父组件
通知孩子
`,
控制器：函数（）{
var ctrl=this；
ctrl.notifiedFromChild=函数（计数）{
ctrl.childMessage=“From child”+计数；
}
ctrl.click=函数（）{
ctrl.message=Math.random（）
}
},
绑定：{}
});
app.component（'childComponent'{
模板：`
子组件
通知家长
{{$ctrl.parentMessage}
`,
控制器：函数（）{
var ctrl=this；
ctrl.counter=0；
ctrl.click=函数（）{
ctrl.onChange({
计数：++ctrl.counter
});
}
},
绑定：{
onChange:“&”，
parentMessage:“您可以使用广播和on机制，如下所示

$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started');
}

然后使用控制器的
$scope
接收：

$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});

如果需要，可以在$broadcast时传递参数：

$rootScope.$broadcast('scanner-started', { any: {} });

然后接收它们：

$scope.$on('scanner-started', function(event, args) {

    var anyThing = args.any;
    // do what you want to do
});

一种可能的解决方案是在父级中创建
寄存器
函数，如下所示：

ctrl.register = function(child){
    ctrl.childCtrl = child;
}

然后使用常规回调绑定将此
register
函数传递给子函数，并让子函数调用它。如下所示：

app.component('childComponent', {
    bindings: {
        registerParent: '&'
    }
    controller: function() {
        var ctrl = this;

        // Register the child controller with the parent.
        ctrl.registerParent({childRef: ctrl});

        ctrl.childFunction = function(message) {
            console.log('Child function: ' + message);
        }
    },
    // ...and so on
});

然后通过模板传递它

<child-component register-parent="$ctrl.register(childRef)" />

这应该将以下内容记录到控制台中：
子函数：从父函数调用

我已经创建了一个
您可以尝试双向绑定

您的子组件将具有新绑定：

bindings: {
    onChange: '&',
    parentMessage: '<message',
    callChild: '='
  }

在你的父函数中，你调用了这个函数。我已经更新了你的Plunk，使之符合我刚才解释的

我不确定我是否完全理解您的答案。这是否意味着我将在init上调用该子函数？您能否给出示例或解释如何使用
childRef
？您基本上会将对ChildComponent的控制器对象实例的引用传递给父控制器。我已使用指向工作的链接更新了我的答案举个例子。在Begging很难理解…但这是天才，正是我想要的，谢谢！快速提问你-你能将这种技术与更常见的广播/在性能方面进行比较吗？真的很难进行比较。我认为这种方法不应该有任何真正的性能含义。但我所使用的其他方法也不会我认为。对我来说，这取决于我对什么感到舒服。我不喜欢在角度上使用广播系统，所以我尽量远离它。有些人不喜欢像这样把孩子暴露在父母面前（我也能理解这一点），所以对我来说，这是两个“邪恶”中较小的一个.我主要是尽量避免这种情况。当我使用它时，我通常会稍微修改它，以便只注册子函数，而不是整个子控制器。
bindings: {
    onChange: '&',
    parentMessage: '<message',
    callChild: '='
  }

ctrl.callChild = function() {
    ctrl.parentCalled = true;
}