Struggling with Angular Typescript once again, this time dealing with directives and controllers. I am attempting to pass an object from a page to a directive and then utilize that object in the controller of the directive. While it may not be the most efficient approach, it seems logical to me; however, I'm having difficulty accessing the object in the controller.
HTML snippet from the page:
<div>
<section>
On View: {{ee.obj.name}}
<image-upload obj="ee.obj"></image-upload>
</section>
</div>
Directive template section:
<div>
On directive: {{obj.name}}
On controller: {{iuc.obj.name}}
<div class="row">
<div class="col-md-4 text-primary h4">
Add Images
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="file" multiple ng-model="iuc.imageUploads" ng-change="iuc.uploadImages()" />
</div>
</div>
<div class="row">
<div class="col-md-3 dropzone"></div>
</div>
</div>
Typescript code for the directive:
/// <reference path="../../../scripts/_all.ts" />
module ObjConfig {
'use strict'
export class ImageUpload implements ng.IDirective {
static instance(): ng.IDirective {
return new ImageUpload();
}
restrict = 'E';
replace = true;
templateUrl = '../../../../App/AppConfig/Views/Directives/ImageUpload.html';
scope = {
obj: '='
};
controller = imageUploadCtrl;
controllerAs = 'iuc';
}
export class imageUploadCtrl {
obj: OBJBase;
imageUploads: OBJImage[];
constructor() {
}
uploadImages() {
//THIS IS WHERE I WANT TO ACCESS OBJ
//this.imageUploads.forEach((iu) => { this.obj.images.push(iu); });
}
}
angular.module('ObjConfig').directive('imageUpload', ImageUpload.instance);
}
Although "this.obj" in the method returns undefined, indicating that the controller's "obj" is not automatically linked to the directive's "obj", the value of ee.obj.name on the page is displayed, as well as the obj.name at the top of the directive template. However, the iuc.obj.name does not display any value. I have attempted to connect the directive's obj to the controller's obj using a link function with ng.IAttributes, but all it provides is ee.obj without giving me the actual object.
I would greatly appreciate any assistance with this issue.