子组件未调用AngularJS ES6父函数

Question

I'm a bit new to the ES6 syntax/structure of Angular 1.x, and I'm running into an issue with passing a function from a parent controller to a child controller.

This is how the app is tied together (I use webpack + babel with this as the entry-point):

const requires = [
    'ngRoute',
];

//App
angular.module('kanban',requires)
    .controller('dashboardCtrl', dashboardCtrl)
    .component('board', board)
    .component('task', task)
    .config(routes);

In my routes, I have a single route, which is my 'parent'

export default function($routeProvider) {
    $routeProvider
        .when('/', {
            template: dashboardTemplate,
            controller: 'dashboardCtrl',
            controllerAs: '$ctrl',
        });
}

Who's controller looks like this:

export default function($rootScope) {
    $rootScope.title = 'Kanban';
    let _this = this;

    this.boards = [
        {
            _id: 'b1',
            title: 'backlog',
            tasks: ['t1', 't2'],
        }
    ];

    this.deleteBoard = function(board) {
        console.log(board);
        let index = _this.boards.indexOf(board);
        if (index !== -1) {
            _this.boards.splice(index, 1);
        }
    };

And in the template, the child is created with ng-repeat, passing in the function

<board ng-repeat="board in $ctrl.boards" board="board" onDelete="$ctrl.deleteBoard(board)" ></board>

And the board binds the attribute as a function with an &

export const board = {
    template: boardTemplate,
    controller: boardCtrl,
    bindings: {
        board: '=',
        onDelete: '&',
    }
};

And the function is added to the controller within a different function:

export default function boardCtrl() {
    let _this = this;

    this.deleteBoard = function(){
        console.log(_this.onDelete);
        _this.onDelete({board: _this.board});
    };
}

And called with a click:

<button ng-click="$ctrl.deleteBoard()"></button>

I can reach the board (child) controller's function, which prints this in the console:

function (locals) {
    return parentGet(scope, locals);
}

And returns no errors, but the console.log in the parent deleteBoard function does not get called.

What is happening here? Why does the child seem to recognize that it is calling something in the parent scope, but is not reaching it?

Answer 1

Turns out this issue was because of how the attribute was named in the parent template, where

<board onDelete="$ctrl.deleteBoard(board)"></board>

needed to be the following instead:

<board on-delete="$ctrl.deleteBoard(board)"></board>

even though the attribute is bound as "onDelete" on the child controller.