I am using ngDialog to show/update/delete detail records. The code that I have is working ok but I don't like the way to use the $scope like this.$scope.newContact = this.newContact;
I would like to use controller or controllerAs syntax but cannot get it working. Since I am using Typescript I don't like this $scope injection. Any suggestions will be appreciated.
// Update: Posting detail code for clarifications My scenario is this: - ContactController populates a list of the contacts - The user clicks on a contact or clicks add new - Contact controller will show the ngDialog - User updates the contact details and press saves then Contactcontroller is called back by ngController and contactController will update the list. I simply want to be able to pass this.newContact to ngDialog without using the $scope mess!!
This is my controller code for the above scenario:
module CRM.Contacts {
import GridConfigHelper = CRM.Common.GridConfigHelper;
export class ContactController implements IShowMaintenanceDetails, ICrudController<Contact> {
public contact: CRM.Contact;
public newContact: Contact;
public contacts: Contact[];
static $inject = ["$http", "CRM.Contacts.ContactService", "CRM.Common.PopupService", "ngDialog", "$scope"];
constructor(private $http: ng.IHttpService, private contactService: ICrudService<Contact>,
private popupService: CRM.Common.IPopupService,
private ngDialog: angular.dialog.IDialogService, private $scope: any) {
var contactGridConfig = GridConfigHelper.Init();
this.$scope.resource = contactGridConfig;
this.getAllRecords();
this.newContact = this.newDefaultRecord();
this.associatedRecordsShown = false;
}
showAddNewDetails(): void {
this.newContact = this.newDefaultRecord();
this.$scope.newContact = this.newContact;
this.showPopup(this.$scope); // Show ngDialog for adding new contact
}
newDefaultRecord(): Contact {
// Removed for brevity
}
selectRecord(index: number): void {
if (index !== this.newContact.RowIndex) {
this.associatedRecordsShown = false;
}
this.newContact = this.contacts[index];
this.newContact.RowIndex = index;
this.$scope.newContact = this.newContact;
this.showPopup(this.$scope); // Show ngDialog for updating / deleting
}
private showPopup($scope: any): void {
var result = this.ngDialog.openConfirm({
template: "/js/controllers/_MaintainContact.Html",
showClose: true,
className: 'ngdialog-theme-default custom-width',
scope: this.$scope
});
result.then(data => {
if (data === "save") {
this.saveRecord(this.$scope.newContact);
this.popupService.showSucesss("Record is saved successfully.");
} else if (data === "delete") {
this.deleteRecord(this.$scope.newContact);
this.popupService.showSucesss("Record is deleted successfully.");
}
});
}
deleteRecord(contactToDelete: Contact): void {
// Deletes a contact
}
saveRecord(contactToSave: Contact): void {
// Saves the contact that is passed from the ngDialog
}
getAllRecords(): Array<Contact> {
// returns all the contacts. removed for brevity
return this.contacts;
}
getRecord(id: number): CRM.Contact { throw new Error("Not implemented"); }
}
angular.module("CRM").controller("CRM.Contacts.ContactController", ContactController);
}
This is my template:
<div id="contactAddNew">
<!-- Changing this to form-horizontal makes all controls locked. If not then label alignment is not good! -->
<form class="form" id="addNewContactForm" name="addNewContactForm" ng-controller="CRM.Contacts.ContactMethodController as ContactMethod">
<fieldset>
<!-- Form Name -->
<legend>Contact</legend>
<div class="row">
<div class="form-group col-md-6">
<label class="col-md-4 control-label" for="id">ID:</label>
<div class="col-md-8">
<input id="id" name="Id" ng-model="newContact.Id" type="text" placeholder="Id" ng-disabled="true" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group col-md-6 required">
<label class="col-md-4 control-label" for="firstName">First Name:</label>
<div class="col-md-8">
<input id="firstName" name="FirstName" required="" ng-model="newContact.FirstName" type="text" placeholder="First Name" class="form-control input-md">
</div>
</div>
<div class="form-group col-md-6 required">
<label class="col-md-4 control-label" for="website">Contact Method:</label>
<div class="col-md-8">
<select id="contactMethod" name="contactMethod" ng-model="newContact.ContactType"
ng-options="method.id as method.description for method in ContactMethod.contactMethodTypes" class="form-control input-md"></select>
</div>
</div>
// removed for brevity
<!-- Save / Cancel / Delete buttons -->
<div class="row">
<div class="form-group col-md-offset-8">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" title="Save new record" data-toggle="tooltip" data-placement="right" name="submit"
ng-click="confirm('save')" class="btn btn-success" ng-disabled="addNewContactForm.$invalid">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
<button title="Delete existing record" data-toggle="tooltip" data-placement="right" id="delete" ng-disabled="newContact.RowIndex < 0" class="btn btn-danger"
ng-click="confirm('delete')">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button title="Cancel adding new" data-toggle="tooltip" data-placement="right" id="cancel" name="cancel" class="btn btn-danger"
ng-click="closeThisDialog()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
You can pass data to ngDialog using data property:
private showPopup($scope: any): void {
var result = this.ngDialog.openConfirm({
template: "/js/controllers/_MaintainContact.Html",
showClose: true,
className: 'ngdialog-theme-default custom-width',
data: {
newContact: this.$scope.newContact // passes a reference
}
});
result.then(data => {
if (data === "save") {
this.saveRecord(this.$scope.newContact);
this.popupService.showSucesss("Record is saved successfully.");
} else if (data === "delete") {
this.deleteRecord(this.$scope.newContact);
this.popupService.showSucesss("Record is deleted successfully.");
}
});
}
I'm not sure how come that you don't need to use result.closePromise but it's good to know that too.
Template:
<input id="id" name="Id" ng-model="ngDialogData.newContact.Id" type="text" placeholder="Id" ng-disabled="true" class="form-control input-md">