I've been attempting to integrate an Angular function parameter into a TypeScript directive, but it seems like my syntax is off. Here's an example of the directive code I'm working with:
export class CustomDirective implements ng.IDirective {
public restrict: string = "E";
public replace: boolean = true;
public templateUrl: string = '/views/_dialogs/customDialog.html';
public controller = Directives.CustomController;
public controllerAs: string = 'Ctrl';
public bindToController: boolean = true;
public scope: any = {
showDialog: '=',
saveInProgress: '=',
onSuccessCallback: '&',
onCloseCallback: '&'
};
}
Now, let me share a snippet from my controller file:
export class CustomController {
static $inject = ["$scope", "$q", "CustomServices"];
public showDialog: boolean;
public saveInProgress: boolean;
public onSuccessCallback: () => void;
public onCloseCallback: () => void;
....
public save(): void {
//Indicate saving in progress
this.saveInProgress = true;
//Call service function to perform action
this.CustomServices.performAction(this.data).then(x => {
//Hide modal when action is completed
this.showDialog = false;
//Execute callback function defined in parent controller
this.onSuccessCallback();
});
}
}
Everything is functioning smoothly except for the function parameter in the parent controller. Despite trying various syntaxes in the directive implementation such as:
<custom-directive on-success-callback="executeFunction()" ...
or
<custom-directive on-success-callback="executeFunction" ...