Question

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

Controller（“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＆lt; ---告诉我在HTML属性中输出{{ object }}，然后在指令中输出$eval返回JSON ...

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

https://groups.google.com/forum/#!msg/angular/RyywTP64sNs/Y_KQLbbwzzIJ＆lt; - 与上面相同，他们说要将JSON作为字符串输出到属性中，然后$eval将其返回给JSON ...将无效我出于与第一个链接相同的原因。

http://jsfiddle.net/joshdmiller/FHVD9/＆lt; - 复制他的确切语法是不可能的，因为我想传递给我的指令的数据是任务数组的当前索引而{{1}这很接近，但显然不能在ng-repeated的约束下工作吗？

Angularjs pass multiple arguments to directive ng-repeat＆lt; - 这个语法对我不起作用 - 如果我尝试在参数中传递ng-repeat对象（数组中的当前表示对象），它传递文字字符串“taskData”而不是对象本身？在这一点上，我真的在挠头。

我正在努力实现的目标（因为我可能完全以错误的方式解决这个问题并且觉得我应该整体解释这个问题）：

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

tasks

Etc等。

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

我想让函数在指令的link函数内操作每个单独任务的数据。因此，completed: true || false description: a string tags: an array of strings将是指令中的一个函数，它将更新点击上任务的markAsCompleted()布尔值。

我这样做，因为我看到它有两个选择：

控制器中的一个函数，我将任务传递给参数进行修改，然后执行数据操作
或 angular指令中的一个函数，它只是操作附加到此特定指令的对象的数据（我当前的问题是我明显无法将对象双向绑定到此特定指令）

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

所以是的。我很困惑如何去做这件事，并且非常欣赏我在哪里出错的一些见解：）

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

Answer 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

如何将ng-repeat对象传递给AngularJS指令？

2 个答案: