Передача функции в качестве параметра через 2 директивы в angularjs

Question

У меня есть список элементов Задачи:

        template: 
            `<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>`

, которые находятся внутри списка задач:

        template:
            `<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($event, task)"
            advance-Task="advanceTask($event, task)"
            delete-Task="deleteTask($event, task)">
        </task-List> 

для каждой отдельной задачи (чтобы кнопка каждой задачи могла изменить свои свойства).С моим текущим кодом, когда кнопка нажата, и $ event, и task не определены при последнем вызове, как правильно передать функции в качестве параметров в такой ситуации?

Answer 1

Для компонента task используйте одностороннюю привязку с '<' для входов и привязку выражений с '&' для выходов:

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>`
});

Аналогично для компонента taskList:

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> 

Для получения дополнительной информации см. AngularJS Developer Guide - Архитектура приложений на основе компонентов .

Answer 2

Я считаю, что проблема заключается в том, что когда вы создаете экземпляр списка задач, вы сразу вызываете функции back-Task="backTask($event, task)".

Вместо этого вы должны передавать ссылки на функции back-Task="backTask" и вызывать функции вng-клики в шаблоне задачи 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>

шаблон списка задач

<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> 

Надеюсь, что это работает и это имеет смысл:)

PS Я не уверен, как вы определили свои директивы, но имейте в виду, что при определении имени директивы или атрибута вы должны написать это врегистр верблюда в объявлении js e.g. taskList и в строчном-тире-разделенном в шаблоне e.g. <task-list>