Javascript 通过angularjs中的2个指令将函数作为参数传递

我有一个任务项列表：

模板：

<div> 
    <p class="assignment">{{ task.Assignment }}</p>
    <p class="assignment">{{ task.Assignee }}</p>
    <button class="btn btn-primary btn-sm" ng-click="backTask()"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-primary btn-sm" ng-click="advanceTask()"><i class="fas fa-arrow-right"></i></button>
    <button class="btn btn-danger btn-sm" ng-click="deleteTask()"><i class="fas fa-trash-alt"></i></button>
</div>

{{task.assignment}
{{task.assignment}

任务列表中的任务：

模板：

<div id="{{ status }}" class="col-md-4 taskList">
    <ul class="list-group">
    <li class="list-group-item flex-column">To Do</li>
    <li ng-repeat="task in tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
            <task 
                    task="task"
                    back-Task="backTask()"
                    advance-Task="advanceTask()"
                    delete-Task="deleteTask()">
            </task>
        </li>
    </ul>
</div>

要做的事

我需要从初始调用中传递back、advance和delete任务函数：

<task-List 
    status="todo" 
    tasks="tasks"
    back-Task="backTask($event, task)"
    advance-Task="advanceTask($event, task)"
    delete-Task="deleteTask($event, task)">
</task-List> 

---

到每个单独的任务（以便每个任务的按钮可以更改其属性）。在我当前的代码中，当最后一次调用按下按钮时，$event和task都未定义，在这种情况下，传递函数作为参数的正确方法是什么

我认为问题在于，当您实例化任务列表时，您直接调用函数

back task=“backTask（$event，task）”

相反，您应该传递对函数的引用

back Task=“backTask”

并在任务模板中的ng clicks中调用函数

ng click=“backTask（$event，Task）”

任务模板

<div> 
    <p class="assignment">{{ task.Assignment }}</p>
    <p class="assignment">{{ task.Assignee }}</p>
    <button class="btn btn-primary btn-sm" ng-click="backTask($event, task)"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-primary btn-sm" ng-click="advanceTask($event, task)"><i class="fas fa-arrow-right"></i></button>
    <button class="btn btn-danger btn-sm" ng-click="deleteTask($event, task)"><i class="fas fa-trash-alt"></i></button>
</div>

{{task.assignment}
{{task.assignment}

任务列表模板

<div id="{{ status }}" class="col-md-4 taskList">
    <ul class="list-group">
    <li class="list-group-item flex-column">To Do</li>
    <li ng-repeat="task in tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
            <task 
                    task="task"
                    back-Task="backTask"
                    advance-Task="advanceTask"
                    delete-Task="deleteTask">
            </task>
        </li>
    </ul>
</div>

要做的事

任务列表实例化

 <task-List 
    status="todo" 
    tasks="tasks"
    back-Task="backTask"
    advance-Task="advanceTask"
    delete-Task="deleteTask">
</task-List> 

希望它能起作用并且有意义：）

---

另外，我不确定您是如何定义指令的，但请记住，在定义指令名称或属性时，您会在js声明中使用驼峰大小写，例如taskList，并在模板

中使用小写破折号分隔，例如
任务
组件的
，使用带有
的单向绑定这是我已经尝试过的，赋值和赋值都正确显示，但是单击按钮不会进行任何调用，这就是为什么我认为我需要从一开始就传递带有参数的函数。
app.component("task", {
    bindings: { item: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&'
              },
    controller: function() {
        this.backClick = (event) => this.backTask({$event: event});
        this.advanceClick = (event) => this.advanceTask({$event: event});
        this.deleteClick = (event) => this.deleteTask({$event: event});
    },
    template: 
        `<div> 
            <p class="assignment">{{ $ctrl.item.Assignment }}</p>
            <p class="assignment">{{ $ctrl.item.Assignee }}</p>
            <button ng-click="$ctrl.backClick($event)"><i class="fas fa-arrow-left"></i></button>
            <button ng-click="$ctrl.advanceClick($event)"><i class="fas fa-arrow-right"></i></button>
            <button ng-click="$ctrl.deleteClick($event)"><i class="fas fa-trash-alt"></i></button>
        </div>`
});

app.component("taskList", {
    bindings: { status: '<',
                tasks: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&',
              },
    controller: function() {
        this.backClick = (event,task) => backTask({$event:event, $task:task});
        this.advanceClick = (event,task) => advanceTask({$event:event, $task:task});
        this.deleteClick = (event,task) => advanceTask({$event:event, $task:task});
    },
    template:
        `<div id="{{ $ctrl.status }}" class="col-md-4 taskList">
            <ul class="list-group">
            <li class="list-group-item flex-column">To Do</li>
            <li ng-repeat="task in $ctrl.tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
                <task 
                    item="task"
                    back-task="$ctrl.backClick($event,task)"
                    advance-task="$ctrl.advanceClick($event,task)"
                    delete-task="$ctrl.deleteClick($event,task)">
                </task>
            </li>
            </ul>
        </div>`
});

<task-list 
    status="vm.todo" 
    tasks="vm.tasks"
    back-task="vm.backTask($event,$task)"
    advance-task="vm.advanceTask($event,$task)"
    delete-task="vm.deleteTask($event,$task)">
</task-list>