2017-02-06 7 views
0

ng-repeatを使用していくつかの情報を表示するためのテンプレートとして機能するカスタムディレクティブを作成しました。私はまた、ループされている配列に対していくつかの操作を行う必要があります。私の質問は、各要素がスタンドアロンディレクティブ内の別のスコープの内側にある場合、その配列に要素を追加または削除する方法です。ディレクティブを使用せずに作業が容易であり、次のようにAngularJS各要素が独立型ディレクティブの内部に格納されている場合、オブジェクトの配列を操作する方法は?

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

ディレクティブテンプレートが見えます:リファクタリングはディレクティブに

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

した後、タスクはそれほど明白ではありません

<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オブジェクトの配列全体をどのように渡しますか?

答えて

0

最初にdataのオーナーを定義しましょう。これは、表示がdata-directiveまたはdataServiceを使用しているコントローラーになることができます。

今、所有者はdataを保持し、それを操作するすべての責任を負います。

dataServiceの場合、そのメソッドはディレクティブから呼び出すことができ、dataは既に使用できます。

それがコントローラである場合、それは例えば&を用いる方法を渡すことができ:

scope: { 
    user: "=", 
    index: "@", 
    arr: "=", 
    onRemove: "&", 
    onSave: "&", 
    onChange: "&", 
}, 
関連する問題