如何将ng重复的对象传递给AngularJS指令?

13 angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

看看我的代码......

Controller("tasks"是我解析的JSON对象数组Routes.js):

app.controller('testCtrl', function(tasks){
    $scope.tasks = tasks.data;
};
Run Code Online (Sandbox Code Playgroud)

HTML:

 <div class="client-wrapper">
   <div class="task-wrapper" ng-repeat="taskData in tasks">
     <div task="taskData">
     </div>
   </div>
 </div>
Run Code Online (Sandbox Code Playgroud)

指示:

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

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

我尝试了很多解决方案,如下所示:

如何将json作为字符串参数传递给指令 <---告诉我输出{{ object }}内部是否有HTML属性,然后$eval返回指令中的JSON ...

这是一个非常粗略的方法,我绝对不希望这样做(我也不认为这将允许它双向绑定回控制器范围中的tasks数组中的实际对象.此方法只是将JSON转换为字符串 - > evals返回JSON +在指令范围内创建该字符串的副本).

https://groups.google.com/forum/#!msg/angular/RyywTP64sNs/Y_KQLbbwzzIJ < - 与上述相同,他们说要将JSON作为字符串输出到属性中,然后再$eval返回JSON. ..出于与第一个链接相同的原因,对我不起作用.

http://jsfiddle.net/joshdmiller/FHVD9/ < - 复制他的确切语法是不可能的,因为我想要传递给我的指令的数据是任务数组的当前索引,ng-repeated...是这样的,但是在ng-repeat显然的约束下不起作用?

Angularjs将多个参数传递给指令ng-repeat < - 这个语法对我不起作用 - 如果我试图在参数中传递taskData对象(数组中的当前表示对象被循环),它传递文字字符串"taskData"而不是对象本身?在这一点上,我真的在挠头.


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

我有一堆数据叫tasks.它们有一些属性,例如:

completed: true || false

description: a string

tags: an array of strings
Run Code Online (Sandbox Code Playgroud)

等等

我正在为所有这些任务输出一个大的行表.每一行都是一个指令,你可以那一行按下一些按钮,以便更改与该行上的任务有关的数据.

我想让函数在指令的link函数内操作每个单独任务的数据.所以就像markAsCompleted()指令中的一个函数一样,它会更新completed被点击的任务的布尔值.

我是这样做的,因为我看到它有两个选择:

  1. 控制器中的一个函数,我将任务传递给参数进行修改,然后执行数据操作
  2. 或者只是操纵附加到这个特定指令的对象数据的angular指令中的一个函数(我当前的问题是我明显无法双向将对象绑定到这个特定的指令)

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


是的.我很困惑如何去做这件事,并非常欣赏一些关于我哪里出错的见解:)

Ant*_*Chu 16

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>
Run Code Online (Sandbox Code Playgroud)