Question

我有一个带有子组件的父组件。

<child-component></child-component>

子组件具有以下功能：

$ctrl.alertMe = function() {
   alert('me');
}

如何通过父组件使用绑定来调用它？

即某种东西...

<child-component alert-child="alertChild"></child-component>

Answer 1

我创建了一个基于我在注释中所描述给你的用户图案的jsfiddle。 jsfiddle here

下面是它的情况下的jsfiddle相关件下降。

HTML

<div ng-app
     id="parent"
     ng-controller="parentCtrl">
  <button ng-click="alert()">click me</button>

  <div ng-controller="childCtrl">

  </div>
</div>

JavaScript

function parentCtrl($scope) {
  $scope.alert = function() {
    for(var i=0; i<subscribers.length; i++) {
      subscribers[i].execute();
    }
  }

  var subscribers = [];

  $scope.subscribe = function(child) {
    console.log('adding child');
    subscribers.push(child);
  }
}

function childCtrl($scope) {
  this.init = function() {
    $scope.$parent.subscribe(this);
  }
  this.init();
  this.execute = function() {
    console.log('i am child. hear me roar');
  }
}

Answer 2

如果您不介意使用双向绑定，则可以通过让子组件在$onInit生命周期挂钩中分配要从父组件调用的函数来实现此目的。之后，您应该能够通过父控制器访问该子功能。

angular
  .module('app', [])
  .component('parentComponent', {
    controller: function () {
      var $ctrl = this;
      $ctrl.action = function () {
        // Will be set by child component
        $ctrl.alertChild();
      };
    },
    template: `
      <button type="button" ng-click="$ctrl.action()">Action</button>
      <child-component alert-child="$ctrl.alertChild"></child-component>
    `,
  })
  .component('childComponent', {
    bindings: {
      alertChild: '=',
    },
    controller: function () {
      var $ctrl = this;
      $ctrl.$onInit = function () {
        $ctrl.alertChild = alertChild;
      };
      function alertChild() {
        console.log('alert from child');
      }
    },
  });

<script src="https://unpkg.com/angular@1.7.6/angular.min.js"></script>
<div ng-app="app">
  <parent-component></parent-component>
</div>

如何使用angularjs中的绑定从父级调用子级函数

2 个答案: