Подтвердить что ты не робот

Как я могу передать объект ng-repeat в мою директиву AngularJS?

Взгляните на мой код здесь...

Контроллер ( "задачи" - это массив объектов JSON, разрешенных в моем Routes.js):

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, в эту директиву, чтобы я мог манипулировать им в нем.

Я пробовал множество решений, как показано ниже:

как передать json в качестве строкового параметра в директиву < ---, который говорит мне выводить {{ 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-repeated... Это близко, но не работает в пределах ограничений ng-repeat, по-видимому?

Angularjs передают несколько аргументов директиве ng-repeat < - Этот синтаксис для меня не работает - если я попытаюсь передать объект taskData (текущий объект представления в массиве зацикливается) в параметре, он передает литеральную строку "taskData", а не сам объект? В этот момент я действительно почесываю голову.


То, что я пытаюсь выполнить (так как я, возможно, полностью об этом поменяю и чувствую, что должен объяснить проблему в целом):

У меня есть куча данных под названием tasks. У них есть несколько свойств, таких как:

completed: true || false

description: a string

tags: an array of strings

Etc и т.д.

Я выводил большую таблицу строк для всех этих задач. Каждая строка будет директивой, с помощью некоторых кнопок вы можете нажать на эту строку, чтобы изменить данные, относящиеся к задаче в этой строке.

Я хочу иметь функции для управления данными каждой отдельной задачи внутри функции ссылки директивы. Так что, как и markAsCompleted(), будет функция внутри директивы, которая обновит логическое completed логическое значение любой задачи, на которую была нажата кнопка.

Я делаю это так, потому что, как я вижу, у меня есть два варианта:

  • Функция в контроллере, где я передаю задачу для изменения в качестве параметра, а затем выполняю манипуляции с данными.
  • Или функция в директиве angular, которая просто управляет данными объекта, прикрепленного к этой конкретной директиве (и моя текущая проблема - это моя очевидная неспособность к двустороннему связыванию объекта с этим конкретная директива)

Я хочу иметь возможность выполнить второй вариант, чтобы сделать мою директиву модульной и автономной.


Так что да. Я смущен относительно того, как это сделать, и очень хотел бы получить некоторое представление о том, где я ошибаюсь:)

4b9b3361

Ответ 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