AngularJS Как манипулировать массивом объектов, если каждый элемент хранится в автономной директиве?

Question

Я создал пользовательскую директиву, чтобы служить в качестве шаблона для отображения некоторой информации с помощью ng-repeat. Мне также нужно сделать некоторые манипуляции с массивом, который зацикливается. Мой вопрос: как я могу удалить или добавить элементы в этот массив, если каждый элемент находится внутри отдельной области внутри автономной директивы? Без использования директивы задача проста:

<div class="well" ng-repeat="dat in data"> 
     <form novalidate> 
      <div class="form-group"> 
       <label for="name">name:</label> 
       <input type="text" class="form-control" id="name" ng-model="dat.name" ng-disabled="enableEdit"> 
      </div> 
      <div class="form-group"> 
       <label for="balance">balance:</label> 
       <input type="text" class="form-control" id="balance" ng-model="dat.balance" ng-disabled="enableEdit"> 
      </div> 
      <div class="form-group"> 
       <label for="fruit">favorite Fruit:</label> 
       <input type="text" class="form-control" id="fruit" ng-model="dat.favoriteFruit" ng-disabled="enableEdit"> 
      </div> 
      <div class="form-group"> 
       <label for="greeting">greeting:</label> 
       <input type="text" class="form-control" id="greeting" ng-model="dat.greeting" ng-disabled="enableEdit"> 
      </div> 
      <button class="btn btn-danger" ng-click="remove($index)">remove</button> 
      <button class="btn btn-default" ng-click="enableEdit=!enableEdit">edit</button> 
      <button class="btn btn-success" ng-click="save(dat,$index);enableEdit=!enableEdit" ng-disabled="enableEdit">save</button> 
     </form> 
    </div> 

После рефакторинга к директиве, задача не столь очевидна:

<div class="well" ng-repeat="dat in data"> 
     <data-directive user="dat" index="{{$index}}" arr="data"></data-directive> 
    </div> 

Шаблон директивы выглядит следующим образом:

<form novalidate> 
    <div class="form-group"> 
     <label for="name">name:</label> 
     <input type="text" class="form-control" id="name" ng-model="user.name" ng-disabled="enableEdit"> 
    </div> 
    <div class="form-group"> 
     <label for="balance">balance:</label> 
     <input type="text" class="form-control" id="balance" ng-model="user.balance" ng-disabled="enableEdit"> 
    </div> 
    <div class="form-group"> 
     <label for="fruit">favorite Fruit:</label> 
     <input type="text" class="form-control" id="fruit" ng-model="user.favoriteFruit" ng-disabled="enableEdit"> 
    </div> 
    <div class="form-group"> 
     <label for="greeting">greeting:</label> 
     <input type="text" class="form-control" id="greeting" ng-model="user.greeting" ng-disabled="enableEdit"> 
    </div> 
    <button class="btn btn-danger" ng-click="remove(index)">remove</button> 
    <button class="btn btn-default" ng-click="enableEdit=!enableEdit">edit</button> 
    <button class="btn btn-success" ng-click="save(user,$index);enableEdit=!enableEdit" ng-disabled="enableEdit">save</button> 
</form> 

Директива js:

app.directive("data-directive", ["dataService", function (dataService) { 

    return { 
     restrict: 'E', 
     templateUrl:"directives/dataDirectiveTemplate.html", 
     scope:{ 
      user: "=", 
      index: "@", 
      arr: "=" 
     }, 
     controller: function ($scope) { 
      $scope.enableEdit = true; 

      $scope.remove = function (index) { 
       console.log(arr); 
       dataService.removeItem(arr, parseInt(index)); 
      }; 

      $scope.save = function (item,index) { 
       dataService.saveItem(item, index, $scope.data); 

      }; 

      $scope.changes = function() { 
       console.log($scope.data); 
      }; 
     } 
    } 
}]); 

Мне удалось передать переменную $index, но как передать весь массив объектов data?

Answer 1

Вначале определите владельца для data. Это может быть контроллер, чей вид использует data-directive или dataService.

Владелец держит data и несет всю ответственность за его манипулирование.

Если это dataService, его метод можно вызывать из директивы, и data уже доступен.

Если контроллер может передать метод с использованием & например .:

scope: { 
    user: "=", 
    index: "@", 
    arr: "=", 
    onRemove: "&", 
    onSave: "&", 
    onChange: "&", 
},