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

Question

我有一个任务项目列表：

模板：

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

在taskList中：

模板：

<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 在最终调用中都未定义，在这种情况下传递函数作为参数的正确方法是什么？

Answer 1

我认为问题在于，当您实例化任务列表时，您会立即调用函数back-Task="backTask($event, task)"。

相反，您应该传递对函数back-Task="backTask" 的引用，并在任务模板ng-click="backTask($event, task)" 的ng-clicks 中调用函数

任务模板

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

希望可行并且有意义:)

附：我不确定您是如何定义指令的，但请记住，在定义指令名称或属性时，您将在 js 声明 e.g. taskList 中以驼峰式大小写并以小写破折号分隔的模板e.g. <task-list>

Answer 2

对于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 - Component-based application architecture。