Angular and ngDialog issue where data is not showing though dialog is shown correctly

Question

I am using Angular / Typescript with ng-Dialog. In this stage the ng-Dialog is showing the template correctly the way I want it. However, no data is shown. The scenario is this: I have a detail page that shows all the contacts list. The user clicks on a contact it calls the ContactController.selectRecord function and passes the index of the selected row. This function finds the specified contact and pops the dialog (up to this stage everything is working including the data). However, when the dialog is popped the values are not shown. The code is as following (code has been trimmed for brevity):

module CRM.Contacts {
 export class ContactController implements IShowMaintenanceDetails, ICrudController<Contact> {
    public newContact: Contact;
    public contacts: Contact[];

    static $inject = ["$http", "CRM.Contacts.ContactService", "CRM.Common.PopupService", "ngDialog"];

    constructor(private $http: ng.IHttpService, private contactService: ICrudService<Contact>,
                private popupService: CRM.Common.IPopupService, private ngDialog: angular.dialog.IDialogService) {
    }


    selectRecord(index: number): void {
        this.newContact = this.contacts[index];
        this.ngDialog.openConfirm({
            template: "/js/controllers/_MaintainContact.Html",
            showClose: true,
            className: 'ngdialog-theme-default custom-width',
            controllerAs: "VM", //tried ContactController as VM
            data: this.newContact // tried json.Stringify(this.newContact)
            // controller:this // tried
            // controller:"ContactController" // tried
        });
    }
}

}

the code in _MaintainContat.Html is (trimmed for brevity):

<div id="contactAddNew" >


    <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="VM.newContact.FirstName" type="text" placeholder="First Name" 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="lastName">Last Name:</label>
                <div class="col-md-8">
                    <input id="lastName" name="LastName" required="" ng-model="VM.newContact.LastName" type="text" placeholder="Last Name" class="form-control input-md">
                </div>
            </div>

            <!-- 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" type="submit" title="Save new record" data-toggle="tooltip" data-placement="right" name="submit" ng-click="VM.saveRecord(VM.newContact)"
                                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="VM.newContact.RowIndex < 0" class="btn btn-danger" ng-click="VM.deleteRecord(VM.newContact)">
                            <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="VM.hideAddNewDetails()">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </fieldset>

I have played with many options of the ng-dialog i.e controller: this or controller: "ContactController", controllerAs: "ContactController as VM" or even controllerAs: "VM" but none of them works.

Can anyone please let me know about the missing bit. Any comments will be appreciated.

The next step would be to pass the updated data from _MaintainContat.Html back to ContactController.

Any help will be appreciated.

many thanks

score 0 · Answer 1 · answered Nov 06 '15 at 10:15

Ok, finally got it working. The solution was to set ngDialog's scope:

 selectRecord(index: number): void {
        this.newContact = this.contacts[index];
        this.showAddNewDetailSectionIsShown = true;
        this.newContact.RowIndex = index;
        this.$scope.newContact = this.newContact;

        this.ngDialog.open({
            template: "/js/controllers/_MaintainContact.Html",
            showClose: true,
            className: 'ngdialog-theme-default custom-width',
            scope : this.$scope // This line did the trick
        });
    }

Angular and ngDialog issue where data is not showing though dialog is shown correctly

1 Answers1