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

看看我的代码在这里

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);
    }
  };
});

由于某些原因,我似乎无法弄清楚如何将任务中的当前对象传递到任务数组中,以便我可以在其中操作它.

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

how to pass a json as a string param to a directive< ---它告诉我输出{{object}}里面的一个HTML属性,然后$eval返回到指令中的JSON ... 这是一个非常大的方法,我绝对不想这样做(我也不认为这将允许它双向绑定到控制器范围中的任务数组中的实际对象.这个方法只是将JSON转换成字符串 – > evals返回到JSON,在该指令范围内复制该字符串).

https://groups.google.com/forum/#!msg/angular/RyywTP64sNs/Y_KQLbbwzzIJ< - 与上述相同,他们表示将JSON作为字符串输出属性中,然后将$eval返回给JSON ...与第一个链接相同的原因对我来说不起作用. http://jsfiddle.net/joshdmiller/FHVD9/< - 复制他的确切语法是不可能的,因为我要传递给我的指令的数据是任务数组的当前索引,同时被重复...这是接近的,但不能在ng重复的约束显然? Angularjs pass multiple arguments to directive ng-repeat – 这个语法对我来说不起作用 – 如果我尝试传递参数中的taskData对象(正在循环的数组中的当前表示对象),它会传递文本字符串“taskData”,而不是对象本身?在这一点上,我真的抓了我的头.

我想完成什么(因为我可能完全以错误的方式去做,感觉我应该解释整个问题):

我有一堆称为任务的数据.他们有一些属性,如:

completed: true || false

description: a string

tags: an array of strings

等等等

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

我想要具有这些功能来操纵指令链接功能中每个单独任务的数据.所以像markAsCompleted()将是这个指令中的一个函数,它会更新任何被点击的任务的完成布尔值.

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

>控制器中的一个函数,我将任务修改为参数,然后执行数据操作
>或者角度指令中的函数只是操纵附加到这个特定指令的对象的数据(而我目前的问题是我明显地无法将对象绑定到这个特定的指令)

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

嗯是的.我很困惑,如何去做这个,将非常感谢一些洞察力,我在哪里错了:)

范围:{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>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...