Question

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

让我们说我的组件叫做task-runner，下面是父容器中的HTML。

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

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

plunkr是here。我希望在单击ParentToChildButton时，函数doSomethingInParent（）调用组件中的remotefunc。

Answer 1

有几种不同的方式：

将对象作为具有双向绑定（scope:{myattr:'='}）的属性传递给task-item-header指令，该指令随后可以添加一个函数供父控制器调用。
设置一个属性，该属性对其具有单向绑定（scope:{myattr:'@'}），然后attrs.$observe对其进行更改以触发操作，或双向绑定（scope:{myattr:'='}）和然后$scope.$watch对其进行更改以触发操作。
让指令引发一个事件（scope:{raiseLoaded:'&onLoaded'}），该事件传递一个表示远程控制对象的对象，并在其上触发所需的操作。要举起活动，您可以在指令中拨打raiseLoaded({remoteControl: remoteControlObj})之类的内容，然后听取活动，假设您有<task-item-header on-loaded="setRemote(remoteControl)">，请使用setRemote()父控制器上的方法。

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

Answer 2

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

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

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

我创建了一个codepen来证明这一点。它可以轻松扩展，以处理来自父级的与数据更改无关的不同类型的通知。

<强>的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);
  };
};

}

对于与@adam0101＃3类似的答案，请参阅codepen。

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

2 个答案: