CODEWITHSUNDEEP
javascriptangularjsscopeangular-directiveangular-controller
bkhines
bkhines

Reputation: 191

Angular + Typescript: Use Directive Class Scope Variable in Controller Class

Having another problem with figuring out Angular Typescript; this time when it comes to directives with controllers. Trying to pass an object from a page to a directive and then use that object in the controller of the directive. Maybe this isn't the correct approach, but it seems to make sense to me; just can't figure out how to access the object in the controller.

HTML from page:

<div>
    <section>
        On View: {{ee.obj.name}}
        <image-upload obj="ee.obj"></image-upload>
    </section>
</div>

Directive template:

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

Directive typescript:

/// <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);
}

When I use "this.obj" in the method, it comes back as undefined so obviously the controller "obj" doesn't get automatically wired up to the directive "obj". The ee.obj.name on the page shows value, the obj.name at the top of the directive template shows value, but the iuc.obj.name does not show value. So I've been trying to find a way to link the directive obj to the controller obj and I've tried using a link function to use ng.IAttributes, but that doesn't give me the object; it gives me ee.obj.

Any help would be greatly appreciated.

Upvotes: 0

Views: 1666

Answers (1)

Claies
Claies

Reputation: 22323

You should be able to accomplish what you are trying to do using bindToController: true.

This feature is documented in the $compile documentation, so it's not easy to locate, but it does what you want.

When an isolate scope is used for a component (see above), and controllerAs is used, bindToController: true will allow a component to have its properties bound to the controller, rather than to scope. When the controller is instantiated, the initial values of the isolate scope bindings are already available.

Upvotes: 2

Related Questions