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