CODEWITHSUNDEEP
angularjsangularjs-directivetypescript
user2175281
user2175281

Reputation: 53

Directive with Typescript and isolate scope function binding

I am writing a web app with AngularJS and, for the first time, using TypeScript. The issue I'm having is with a directive executing a function passed on its isolate scope.

I have a controller that is managing "work" of different types. I then have different directives to manage each type of work. The controller reserves the next piece of work, then places it on the scope for the appropriate directive. The controller is below.

module app.work {

interface IWorkScope {
    workDone: boolean;
    workCompleted(): void;
}
export class WorkController implements IWorkScope {
    currentReservedWork: app.work.IReservedWork;

    static $inject = ['app.work.WorkService', '$log'];
    constructor(private workService: app.work.IWorkService,
                private $log: ng.ILogService) {
    }

    private getNextWork() {
        //...call service, reserve work, prep data...
    }
    public workCompleted(): void {
        //...any cleanup tasks, reserve next piece of work....
    }
}
angular.module('app.work')
    .controller('app.work.WorkController', WorkController);
}

The directives then handling the actual workflow of executing the "work" of its type. An example is below.

module app.verify {
'use strict';

export interface IVerifyItemScope extends ng.IScope {
    reserved: app.work.IReservedWork;
    onItemComplete(): any;
    saveButtonClicked(): void;
    item: app.verify.IVerifyItem;
    vm: app.verify.IVerifyItemController;
}
export interface IVerifyItemController {
    getVerifyItem(): void;
}

class VerifyItemController implements IVerifyItemController{
    item: app.verify.IVerifyItem;
    statuses: app.verify.VerifyResultStatus[];
    tempBind: number;

    static $inject = ['$scope', 'app.verify.VerifyService', '$log'];
    constructor(public $scope: IVerifyItemScope,
                private verifyService: app.verify.IVerifyService,
                private $log: ng.ILogService) {
    }

    saveButtonClicked(): void {
        this.$log.debug('button clicked');
        this.$scope.onItemComplete();
    }
    getVerifyItem(): void {
        //...call service to get specific work details...
    }
}

angular
    .module('app.verify')
    .directive('sfVerifyItem', verifyItem);

function verifyItem(): ng.IDirective {
    var directive = <ng.IDirective> {
        restrict: 'E',
        link: link,
        templateUrl: '....',
        controller: VerifyItemController,
        controllerAs: 'vm',
        scope: {
            reserved: '=',
            onItemComplete: '&'
        }
    };

    function link(scope: any, element: ng.IAugmentedJQuery, attributes: any, controller: IVerifyItemController): void {
        //...do any prep...
    }

    return directive;
}
}

<data-sf-verify-item reserved="vm.currentReservedWork" onItemComplete="vm.workCompleted()"></data-sf-verify-item>

When the user compeletes the "work", the directive will do any necessary service calls. Last, it executes function onItemComplete that was passed on the scope to inform the controller that the work is done, then the controller can reserve more work and the process repeats.

The issue I'm having is the function bound on the scope isn't getting executed. I can debug and see it on the isolate scope, but when I execute it in the directive (saveButtonClicked() above), nothing happens in the parent controller.

Sorry for the long post, but any help or insight would be greatly appreciated.

Upvotes: 1

Views: 3146

Answers (1)

user2175281
user2175281

Reputation: 53

See Hugues comment above, forgot to convert binding from camel case.

Upvotes: 1

Related Questions