My main view makes use of a directive called fileUploader. The fileUploader directive uses an ng-repeat to represent a list of objects (file details). I want this file-uploader directive to be reusable, so I wish to place use-specific UI in the view that is using it.
Here is my main view. In this case I want to see the standard file-uploader's template for each item plus two additional pieces of meta data I will find on the object (reference / destinationFolder).
<file-uploader class="col-md-10 file-uploader" file-uploader-upload-url="/x/upload">
<dl>
<dt>Reference</dt>
<!-- Note the binding on the next line, how do I evaluate it to the "item" in the directive's ng-repeat? -->
<dd>{{ item.reference }}</dd>
<dt>Folder</dt>
<dd>{{ item.destinationFolder }}</dd>
</dl>
</file-uploader>
My directive uses ng-transclude to include the <dl> contents above. It seems the {{ item.reference }} is evaluated in the main view and then inserted many times, what I want is for it to transclude it as-is and then evaluate the expression within the context of the directive's ng-repeat. The transclude etc is working correctly, but the binding is not working as I wish.
<ul class="file-upload-list">
<li ng-repeat="item in controller.fileUploader.queue">
<div class="file-upload-item" drag-container drag-data="controller.fileUploader.queue[$index]">
<div class="file-upload-icon">
<img src="/Icons/FileExtension/{{item.file.name | fileExtension}}" alt="Icon" class="file-upload-icon" />
</div>
<div class="file-upload-filename">
<a href="" title="{{ item.file.name }}">
{{ item.file.name | limitTo : -28 }}
</a>
</div>
<!-- Here is where I want the main view's template repeated and data-bound -->
<ng-transclude class="file-upload-meta-data"/>
<div class="progress">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</div>
</li>
</ul>