1

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.

3
  • 1
    onItemComplete will become on-item-complete in html, so I think you need to change you html template. Commented Jun 18, 2015 at 16:16
  • 1
    D'oh!! That was the problem. I figured it was a typo somewhere. Hugues, you are a genius! Commented Jun 18, 2015 at 18:04
  • Haha I would not say that... Got bitten by it quite a few times Commented Jun 18, 2015 at 20:05

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.