AngularJS中跨两个指令传递带参函数的正确实现方法

我之前也踩过类似的坑，你现在的问题核心是没搞清楚AngularJS指令里&绑定回调函数的正确传参逻辑，导致点击按钮时$event和task都变成了undefined。下面一步步给你讲怎么修正：

1. 修正父指令（taskList）的模板传递逻辑 #

你之前在父模板里写的back-Task="backTask()"其实是直接执行了函数，而不是把函数引用传给子指令，更没传递需要的参数。正确的写法是在传递时就明确要传的参数：

<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">
      <!-- 明确传递$event和当前循环的task作为回调参数 -->
      <task 
        task="task" 
        back-task="backTask($event, task)" 
        advance-task="advanceTask($event, task)" 
        delete-task="deleteTask($event, task)">
      </task>
    </li>
  </ul>
</div>

注意：AngularJS指令的属性名用短横线分隔，对应子指令scope里的驼峰命名，比如back-task对应子指令scope中的backTask。

2. 确保子指令（task）的scope正确绑定回调 #

子指令里要使用&类型的绑定来接收父作用域的回调函数，这样才能正确传递参数。你的子指令定义应该改成这样：

angular.module('yourApp').directive('task', function() {
  return {
    restrict: 'E',
    scope: {
      task: '=', // 双向绑定当前任务对象
      backTask: '&', // 绑定父级的backTask回调
      advanceTask: '&',
      deleteTask: '&'
    },
    templateUrl: 'path/to/your/task/template.html'
  };
});

3. 修正子指令模板里的函数调用方式 #

用&绑定的回调函数，调用时需要以键值对对象的形式传递参数，键名要和父模板里定义的参数名完全一致。所以子模板要改成：

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

为什么之前的写法会失效？ #

• 父模板里直接写backTask()会立即执行函数，传递给子指令的是函数执行后的返回值（如果没返回就是undefined），而不是函数本身
• 子指令调用时没有传递参数，即使父级有定义参数，也没法正确接收

这样调整后，点击每个任务的按钮时，$event和当前的task对象就能正确传递到父级的对应函数里，你就能在这些函数里修改对应任务的属性了。

内容的提问来源于stack exchange，提问作者Danyx