Angularjs Angular 1.5，从父控制器调用组件中的函数

Angular 1.5组件可以轻松地从组件创建对父组件的回调。有没有办法从父控制器中的函数调用组件中的函数

假设我的组件称为TaskRunner，下面是父容器中该组件的HTML

<task-runner taskcategogyid=5></task-runner>

 <button type="button" ng-click="doSomethingInParent()">ParentToChildButton</button>

亲子按钮

普朗克尔号是。我希望在单击ParentToChildButton时，函数doSomethingInParent（）调用组件中的remotefunc

有几种不同的方法：

将对象作为具有双向绑定（

scope:{myattr:'='}

）的属性传递给任务项头指令，该指令随后可以向该指令添加一个函数以供父控制器调用

设置一个属性，该属性要么具有单向绑定（

scope:{myattr:'@'}

），然后对其进行

attrs.$observe

更改以触发操作，要么具有双向绑定（

scope:{myattr:'=}

）然后对其进行

$scope.$watch

更改以触发操作

让指令引发一个事件（

scope:{raiseLoaded:'&onload'}

），该事件传递一个表示远程控制对象的对象，该对象上有一个触发所需操作的方法。要引发事件，您可以在指令中调用类似于

raiseLoaded（{remoteControl:remoteControlObj}）

的函数，然后要侦听事件，您可以使用

假设您的父控制器上有

setRemote（）

方法

---

更新我刚刚意识到你的问题是针对AngularJS的更新版本，所以我不确定我的答案是否仍然适用。我现在就把它放在这里，但是如果你发现它没有帮助，我可以删除它。

我以前需要类似的东西，所以我想我会分享我是如何解决这个问题的

与OP类似，我需要自由地从父组件触发子组件中的方法。我希望能够在不使用$onChanges生命周期挂钩的情况下自由/单独地在父级中触发此方法

相反，我创建了一个通知注册机制，允许子组件在加载方法时向父组件“注册”方法。然后，此方法可以由$onChanges周期之外的父级自由触发

我创建了一个示例来演示这一点。它可以很容易地扩展以处理来自父级的与数据更改无关的不同类型的通知

Index.html

<div ng-app="tester">
  <parent></parent>
</div>

Script.js

angular.module('tester', []);

angular.module('tester').component('parent', {
  controller: parentController,
  template: `
    <div class="tester-style">
      <button ng-click="$ctrl.notifyChild()">Notify child</button>
      <child parent-to-child-notification-registration="$ctrl.childComponentNotificationRegistration(handler)">
    </div>
  `
});

function parentController() {
  let childComponentEventHandler = null;

  this.$onInit = function() {
    this.value = 0;
  };

  this.childComponentNotificationRegistration = function(handler) {
    childComponentEventHandler = handler;
    console.log('Child component registered.');
  };

  this.notifyChild = function() {
    if (childComponentEventHandler) {
      childComponentEventHandler(this.value++);
    }
  };
}

angular.module('tester').component('child', {
  bindings: {
    parentToChildNotificationRegistration: '&',
  },
  controller: childController,
  template: `
    <div class="tester-style">
      <h4>Child Component</h4>
    </div>
  `
});

function childController() {
  this.$onInit = function() {
    this.parentToChildNotificationRegistration({
      handler: this.processParentNotification
    });
  };

  this.processParentNotification= function(parentValue) {
    console.log('Parent triggered child notification handler!!!');
    console.log('Value passed to handler:', parentValue);
  };
};

角度模块（'tester'，[]）； 角度。模块（'tester'）。组件（'parent'{ 控制器：父控制器， 模板：` 通知孩子 ` }); 函数parentController（）{ 让childComponentEventHandler=null； 这是。$onInit=function（）{ 该值=0； }; this.childComponentNotificationRegistration=函数（处理程序）{ childComponentEventHandler=handler； log（'子组件已注册'）； }; this.notifyChild=函数（）{ if（childComponentEventHandler）{ childComponentEventHandler（this.value++）； } }; } 角度。模块（'tester'）。组件（'child'{ 绑定：{ parentToChildNotificationRegistration:“&”， }, 控制器：childController， 模板：` 子组件 ` }); 函数childController（）{ 这是。$onInit=function（）{ 此为.parentToChildNotificationRegistration({ 处理程序：this.processParentNotification }); }; this.processParentNotification=函数（parentValue）{ log（'Parent-triggered-child通知处理程序！！！'）； log（'传递给处理程序的值：'，parentValue）； }; }; }

---

同样，对于类似于“s#3”的答案，请参见。

请添加组件定义。组件=否我指的是组件的代码。不是组件的定义。实际的JS部分。你能详细说明一下#3吗？我不清楚在父级（组件容器）中设置了哪个属性，在组件中设置了哪个属性？我在我原来的帖子中添加了一个plunkr。我希望当我单击parenttochildbutton时，组件中的remotefunc（）会被调用并发出警报（5），您可以将其删除，因为这会使人们认为它已经得到了回答。@TkNeo，我修改了您的plunkr，如我在#3:关于这个答案中所述，可以通过在父控制器中声明

ctrl.onXxEvt={}

来简化；然后在父模板中的子组件锚点处声明

onXxEvt=“$ctrl.onXxEvt”

；然后在孩子的控制器的

$onInit

中声明

ctrl.onXxEvt.handler=xxEvtHander

。现在您可以在父控制器中调用

ctrl.onXxEvt.handler

，它将在子控制器中调用

xxEvtHander

。这避免了显式注册方法。谢谢！这么聪明的解决办法。干杯