在 TypeScript 中带有函数参数的角度指令

Angular directive with function parameter in TypeScript

本文关键字：指令 参数 函数 TypeScript      更新时间：2023-09-26

我正在尝试将 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();
        });
    }
}

除了父控制器中的函数参数外，一切都在工作。 我在指令实现中尝试了几种不同的语法，如下所示： 

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

而这个： 

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

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

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

你有controllerAs = 'Ctrl' 所以在成功回调="Ctrl.loadData（）"

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

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

并从$scope调用该方法，如下所示：

this.$scope.onSuccessCallback();
相关文章：