親ディレクティブビューからデータにアクセスするにはどうすればよいですか？

Question

私は、私たちのサイトの標準テーブルレイアウトを扱う一連のディレクティブを構築しようとしています。このために、テーブル用とカラム用の2つのディレクティブを作成しました。 ここでの目標は、親ビュー内のテーブルの列を指示することです。

次に、ディレクティブをインスタンス化する親ビュー（index.html）を示します。 col-nameは、表の各行に表示する属性を示します。

<management-grid> 
    <col-data col-name="name"></col-data> 
</management-grid> 

managementGrid指示の関連する部分は次のとおりです。

.directive('managementGrid', function() { 
    return { 
    ... 
    template: 
     '<table>' + 
     '<tbody>' + 
      '<tr ng-repeat="row in collection" ng-transclude="data">' + 
      '<!--The specific columns go here using col-data-->' + 
      '</tr>' + 
     '</tbody>' + 
     '</table>', 
    transclude: { 
     'data': '?colData' 
    }, 
    controller: ($scope) => { 
     $scope.collection = [{'name': 'Test Row 1'},{'name': 'Test Row 2'}]; 
    } 
    }; 
}); 

そして本当に唯一のディレクティブは、レンダリングする前にブラウザがそれを破棄しないようにtdタグに変換するために使用された子ディレクティブ。最終指令colDataで

.directive('colData', function() { 
    return { 
    ... 
    scope: { 
     colName: '@' 
    }, 
    template: '<td>{{colName}}: {{row[colName]}}</td>' 
    }; 
}); 

、rowオブジェクトにアクセスできません。私は親コントローラにアクセスするためにリンク機能を使用することができますが、それは私にcollectionにアクセスすることを許可し、を使用して作成されたrowにアクセスする必要があります。

ここには、問題を示すFiddleがあります。

編集： 理想的には、私は単にでプロパティ名を渡す必要がcolDataディレクティブにtranscludeとができませんでした<td ng-transclude></td>ような何かと親ビューで<col-data>{{row.name}}</col-data>

Answer 1

私は中$parentを使用してこの問題を解決することができました子供の指示。親スコープにアクセスします。 See the updated fiddle here。