Within my Angular service, I have a method that calls a webapi function:
export class FormulasService extends ServiceBase{
constructor(){super();}
renameFormula(id:string, name:string):ng.IPromise<any>{
var cmd = {id:id, name:name};
return this.executeCommand('RenameFormula', cmd);
}
}
Now I have a component that is used in all modules, taking a function as a parameter:
export class RenameModalCtrl extends ControllerBase{
static $inject=['viewModel']
constructor(private viewModel:RenameModalModel){
super();
}
saveChanges(){
this.viewModel.serviceFunction(this.viewModel.id, this.viewModel.name);
}
}
Accompanied by its model:
export class RenameModalModel{
constructor(
public model:any,
public serviceMethod:(id:string, name:string)=>ng.IPromise<any>)
}
The corresponding view:
...
<input class="form-control" ng-model="modal.viewModel.model.name" />
<button type="submit" ng-click="modal.saveChanges()">Save Changes</button>
...
The viewModel is resolved during the angular.ui.bootstrap.modal's resolve phase. Utilizing Controller-As syntax, the modal in view represents RenameModalCtrl.
rename()
{
var modalInstance = this.$modal.open({
animation: true,
controller: 'renameModalCtrl as modal',
templateUrl: 'renameModal.html',
resolve: {
viewModel: new RenameModalModel(this.itemModel, this.formulasService.renameFormula)
}
});
}
Although everything works except for the service. Within the service, 'this' refers to the current model instead of the service itself. This causes an issue on the line:
this.executeCommand('RenameFormula', cmd);How can this be rectified? Your assistance is appreciated
Thank you