Question

我正在使用AngularJS编写一个Web应用程序，这是第一次使用TypeScript。我遇到的问题是执行在其隔离范围上传递的函数的指令。

我有一个管理员工作＆＃34;工作＆＃34;不同类型。然后，我有不同的指令来管理每种类型的工作。控制器保留下一项工作，然后将其放在适当指令的范围内。控制器在下面。

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

然后指令处理执行＆＃34;工作＆＃34;的实际工作流程。它的类型。下面是一个例子。

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>

当用户参与＆＃34; work＆＃34;时，该指令将执行任何必要的服务调用。最后，它执行在作用域上传递的onItemComplete函数，以通知控制器工作已完成，然后控制器可以保留更多工作并重复该过程。

我遇到的问题是在范围内绑定的功能是否正在执行。我可以在隔离范围上调试并查看它，但是当我在指令中执行它时（上面的saveButtonClicked（）），父控制器中没有任何反应。

对于这篇长篇文章感到抱歉，但我们将非常感谢任何帮助或见解。

Answer 1

请参阅上面的Hugues评论，忘记转换来自驼峰案例的绑定。

使用Typescript和隔离范围函数绑定的指令

1 个答案: