TypeScript中带有函数参数的Angular指令

Question

我试图将Angular函数参数添加到用TypeScript编写的指令中，但是我必须没有语法权利。 这是我的指令的示例：

export class NewUserDirective implements ng.IDirective {
    public restrict: string = "E";
    public replace: boolean = true;
    public templateUrl: string = '/views/_dialogs/newUserDialog.html';
    public controller = Directives.NewUserController;
    public controllerAs: string = 'Ctrl';
    public bindToController: boolean = true;
    public scope: any = {
        showDialog: '=',
        saveInProgress: '=',
        onSuccessCallback: '&',
        onClosingCallback: '&'
    };
}

这是我的控制器的片段：

export class NewUserController {
    static $inject = ["$scope", "$q", "UserServices"];

    public showDialog: boolean;
    public saveInProgress: boolean;
    public onSuccessCallback: () => void;
    public onClosingCallback: () => void;

....

    public save(): void {

        //Flag as saving
        this.saveInProgress = true;

        //Save the plan
        this.UserServices.createUser(this.newUser).then(x => {

            //When finished, hide the modal
            this.showDialog = false;

            //Let parent know new user is created
            this.onSuccessCallback();
        });
    }

}

除了父控制器中的function参数，其他所有东西都可以正常工作。 我在指令实现中尝试了几种不同的语法，如下所示：

    <new-user-directive on-success-callback="loadData()" ...

和这个：

    <new-user-directive on-success-callback="loadData" ...

Answer 1

您是否将controllerAs用于具有loadData方法的外部控制器？ 如果是这样，那么您将需要像这样创建指令（假设您将外部控制器命名为“ Ctrl”）。 注意Ctrl. 在loadData()前面

<new-user-directive on-success-callback="Ctrl.loadData()" ...

Answer 2

您具有controllerAs =' Ctrl '，因此on-success-callback =“ Ctrl .loadData（）”

Answer 3

这些方法通过$ scope传递，而不是通过控制器传递。 您应该创建一个构造函数：

constructor(private $scope, ....){
}

然后像这样从$ scope调用方法：

this.$scope.onSuccessCallback();