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

位于taskList中：

        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

我认为问题在于，当您实例化任务列表时，您将立即调用函数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>

任务列表模板

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

希望有效且有意义：）

P.S。我不确定您是如何定义指令的，但请记住，在定义指令名称或属性时，您可以在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。

通过angularjs

2 个答案: