如何将父组件函数传递给子组件，然后从子组件 AngularJS 内部调用它

问题描述

父级函数

markAchievement() {
    console.log("Achievement marked")
}

绑定到父级的 HTML

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

孩子的绑定

export const markGoalButtonComponentDeFinition = {
    bindings: {
        clickEvent: "&"
    },template: html
};

孩子的 html

<button ng-click="$ctrl.clickEvent()">
    <icon-add-goal></icon-add-goal>
</button>

这是我当前的设置，希望能够在子按钮上调用 markAchievement 函数，然后我希望运行来自父级的函数。

谁能看出我做错了什么？

解决方法

在父 HTML 中，大小写错误。

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

应该是

<mark-goal-button click-event="$ctrl.markAchievement()"></mark-goal-button>

使用绑定时，请确保在 HTML 中使用 snakecase。