Как передать родительскую функцию компонентов в дочернюю, а затем вызвать ее изнутри дочерней AngularJS

#javascript #angularjs #function #binding #angularjs-scope

Вопрос:

Функция на родительском

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

Привязка к родительскому HTML

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

Детские привязки

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

HTML-код ребенка

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

Вот моя текущая настройка, я хочу иметь возможность вызывать функцию markAchievement на кнопке ребенка, а затем я хочу, чтобы функция запускалась от родителя.

Кто-нибудь может понять, что я делаю не так?

Ответ №1:

В HTML-файле родителей оболочка была неправильной.

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

Должно было быть

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

При использовании привязок обязательно используйте snakecase в HTML.