best way to pass data from calling controller to ngDialog - check my code

Question

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>

Answer 1

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">