javascript - Angular 1.5。 |单击子组件从父组件调用函数？

Question

在我的 Angular 为 1.5 的应用程序中，有两个组件。一位家长:

angular.
module('myApp').
component('myContainer', {
    bindings: {
        saySomething: '&'
    },
    controller: ['$scope', function MyController($scope) {
        var containerCtrl = this;
        containerCtrl.saySomething = function saySomething() {
            containerCtrl.sentence = "Hello, world";
            console.log(containerCtrl.sentence);
        };
    }]
});

还有一个 child :

angular.
module('myApp').
component('myButton', {
    bindings: {
        onClick: '&'
    },
    template:
    '<div>' +
        '<a class="button" href="#">Say Something</a>' +
    '</div>'
}); 

这是我的 index.html:

<my-container>
    <my-button ng-click="$ctrl.saySomething()"></my-button>
</my-container>

问题是:如何通过点击子组件中的按钮从父组件调用函数saySomething()？现在它不起作用。我看过类似的问题here但这并没有解决我的问题。在此先感谢您的帮助!

附言如果有任何类似的问题，请让我知道。 Tnanks!

Answer 1

您可以在子组件中require 父 Controller ，然后调用它的方法。

angular.module('demoApp', [])
  .component('myContainer', {
    ...
  })
  .component('myButton', {
    require: {
      parentCtrl: '^myContainer'
    },
    template: '<div>' +
      '<a class="button" href="#" ng-click="$ctrl.parentCtrl.saySomething()">Say Something</a>' +
      '</div>'
  });

这是一个 demo

并链接到documentation