如何将 ng-repeated 对象传递给我的 AngularJS 指令？答案

【问题标题】：How can I pass an ng-repeated object to my AngularJS directive?如何将 ng-repeated 对象传递给我的 AngularJS 指令？
【发布时间】：2014-02-20 05:31:46
【问题描述】：

在这里看看我的代码...

控制器（“tasks”是在我的Routes.js 中解析的 JSON 对象数组）：

app.controller('testCtrl', function(tasks){
    $scope.tasks = tasks.data;
};

HTML：

 <div class="client-wrapper">
   <div class="task-wrapper" ng-repeat="taskData in tasks">
     <div task="taskData">
     </div>
   </div>
 </div>

指令：

app.directive('task', function(){
  return {
    restrict: 'A',
    scope: {taskData: '=taskData'},
    templateUrl: "/templates/directives/task.html",
    link: function(scope, element, attribute) {
      console.log(scope.taskData);
    }
  };
});

出于某种原因，我似乎无法弄清楚如何将tasks 数组中正在循环的当前对象传递给该指令，以便我可以在其中对其进行操作。

我尝试了很多解决方案，如下所示：

how to pass a json as a string param to a directive {{ object }}，然后在指令中将 $eval 输出回 JSON...

这是一种非常粗暴的做法，我绝对不想这样做（我也不认为这会允许它双向绑定回任务数组中的实际对象控制器范围。此方法只是将 JSON 转换为字符串 --> evals 回 JSON + 在指令范围内复制该字符串。

https://groups.google.com/forum/#!msg/angular/RyywTP64sNs/Y_KQLbbwzzIJ $eval 输出回 JSON... 出于同样的原因对我不起作用作为第一个链接。

http://jsfiddle.net/joshdmiller/FHVD9/ tasks 数组的当前索引，同时是 ng-repeated...这很接近，但显然在ng-repeat 的约束下不起作用？

Angularjs pass multiple arguments to directive ng-repeat taskData 对象（正在循环的数组中的当前表示对象），它会传递文字字符串“taskData”而不是对象本身？在这一点上，我真的很摸不着头脑。

我想要完成的事情（因为我可能会以完全错误的方式解决这个问题，并且觉得我应该将问题作为一个整体来解释）：

我有一堆名为tasks 的数据。它们有一些属性，例如：

completed: true || false

description: a string

tags: an array of strings

等等等等

我正在为所有这些任务输出一个包含行的大表。每一行都是一个指令，您可以通过一些按钮在该行来更改与该行上的任务相关的数据。

我想拥有在指令的链接函数中操作每个单独任务的数据的函数。所以就像markAsCompleted() 将是指令中的一个函数，它将更新被点击的任务的completed 布尔值。

我这样做是因为在我看来，我有两个选择：

控制器中的一个函数，我将要修改的任务作为参数传入，然后执行数据操作
或 angular 指令中的一个函数，该函数仅操作附加到此特定指令的对象的数据（我当前的问题是我显然无法将对象双向绑定到此特定指令）李>

我希望能够完成第二个选项，以使我的指令模块化和独立。

是的。我对如何去做这件事感到困惑，非常感谢一些关于我哪里出错的见解:)

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

scope: {taskData: '=taskData'} 表示 Angular 需要一个名为 task-data 的属性，其中包含要传入的值。所以试一试...

<div class="client-wrapper">
   <div class="task-wrapper" ng-repeat="taskData in tasks">
     <div task task-data="taskData">
     </div>
   </div>
</div>

【讨论】：

【解决方案2】：

在您当前的尝试中，您的指令需要一个名为 task-data 的属性。

这应该可以解决您的问题：

app.directive('task', function(){
  return {
    restrict: 'A',
    scope: {task: '='},
    templateUrl: "/templates/directives/task.html",
    link: function(scope, element, attribute) {
      console.log(scope.taskData);
    }
  };
});

请注意，我将指令范围内的属性名称从 task-data 更改为 task

【讨论】：