How can I define additionally binding HTML in an AngularJS directive? - angularjs

Question

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>

Answer 1

Sadly, this is not how ng-transclude transclusion works. What you are trying to do is create a container directive that makes use of its children as a "template" of what to stamp out inside your own directive.
The content that is transcluded is by definition bound to the scope of the place where the directive is instantiated; not to the scope of the directive's template.
So actually you don't really need to use transclusion here as what you really trying to do is simply inject the inner HTML into your own template. You can do this in the compile function like this:
app.directive('test', function(){
return {
restrict: 'E',
compile: function compile(tElement, tAttrs, tTransclude) {
// Extract the children from this instance of the directive
var children = tElement.children();
// Wrap the chidren in our template
var template = angular.element('<div ng-repeat="item in collection"></div>');
template.append(children);
// Append this new template to our compile element
tElement.html('');
tElement.append(template);
return {
pre: function preLink(scope, iElement, iAttrs, crtl, transclude) {
},
post: function postLink(scope, iElement, iAttrs, controller) {
}
};
}
};
});
-- Angular Issue #7874: ng-repeat problem with transclude

Answer 2

The solution was to use an ng-include inside the directive.
First I added an additional attribute on my directive in which the developer can specify the ID of the template, like so:
<file-uploader file-uploader-metadata-template-id="someID" class="col-md-10 file-uploader" file-uploader-upload-url="/x/upload">
Then inside the directive I just needed to use ng-include
<div class="file-upload-meta-data" ng-include="controller.fileUploaderMetadataTemplateId"/>
I can then use the directive like so
<file-uploader class="col-md-10 file-uploader" file-uploader-upload-url="/x/upload" file-uploader-metadata-template-id="file-meta-template"/>
<script type="text/ng-template" id="file-meta-template">
<dl>
<dt>Application</dt>
<dd>{{ item.meta.applicationName }} </dd>
<dt>Reference</dt>
<dd>{{ item.meta.referenceName }} </dd>
<dt>Folder</dt>
<dd>{{ item.meta.targetFolderName }} </dd>
</dl>
</script>
Note that I am binding to a controller, with controllerAs set to "controller" - here is the typescript for those interested....
module MyApp.Directives.FileUploaderDirective {
export class FileUploaderDirectiveController {
public uploadUrl: string;
public metaTemplateId: string;
}
class FileUploaderDirective implements angular.IDirective {
public restrict: string = "E";
public templateUrl: string = "/app/Directives/FileUploaderDirective/FileUploaderDirective.html";
public scope: any = {
uploadUrl: "#fileUploaderUploadUrl",
metaTemplateId : "#fileUploaderMetadataTemplateId"
};
public controller: string = "MyApp.Directives.FileUploaderDirective.FileUploaderDirectiveController";
public controllerAs: string = "controller";
public bindToController: boolean = true;
public transclude: boolean = true;
public replace: boolean = true;
}
export function register(app: angular.IModule) {
app.controller("MyApp.Directives.FileUploaderDirective.FileUploaderDirectiveController", FileUploaderDirectiveController);
app.directive("fileUploader", () => new FileUploaderDirective());
}
}