带有TypeScript函数参数的Angular指令(Angular directive with function parameter in TypeScript)

我正在尝试将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" ...

I'm trying to add an Angular function parameter to a directive written in TypeScript but I must not have the syntax right. Here is an example of my directive:

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: '&' }; }

and here is a snippet of my controller:

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

Everything is working except for the function parameter in the parent controller. I've tried a few different syntaxes in the directive implementation like this:

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

and this:

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

最满意答案

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

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

Are you using controllerAs for the outer controller that has the loadData method on it? If so, then you would need to create your directive like this (assuming you named our outer controller 'Ctrl'). Notice the Ctrl. in front of loadData()

<new-user-directive on-success-callback="Ctrl.loadData()" ...带有TypeScript函数参数的Angular指令(Angular directive with function parameter in TypeScript)

我正在尝试将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" ...

I'm trying to add an Angular function parameter to a directive written in TypeScript but I must not have the syntax right. Here is an example of my directive:

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: '&' }; }

and here is a snippet of my controller:

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

Everything is working except for the function parameter in the parent controller. I've tried a few different syntaxes in the directive implementation like this:

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

and this:

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

最满意答案

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

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

Are you using controllerAs for the outer controller that has the loadData method on it? If so, then you would need to create your directive like this (assuming you named our outer controller 'Ctrl'). Notice the Ctrl. in front of loadData()

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