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

Question

函数于 parent

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

绑定 parent 的 HTML

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

Child 的绑定

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

Child的html

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

这是我当前的设置，希望能够在 child 的按钮上调用 markAchievement 函数，然后我希望该函数来自 parent 运行 ].

谁能看出我做错了什么？

Answer 1

在parentsHTML中，大小写错误。

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

应该是

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

使用绑定时，请确保在 HTML.

中使用 snakecase

How to pass a parent components function into a child and then call it from inside the child AngularJS