将数据从调用控制器传递到 ngDialog 的最佳方法 - 检查我的代码

Question

我正在使用 ngDialog show/update/delete 详细记录。我的代码工作正常，但我不喜欢这样使用 $scope 的方式。$scope.newContact = this.newContact;

我想使用 controller 或 controllerAs 语法，但无法正常工作。因为我使用的是 Typescript，所以我不喜欢这种 $scope 注入。任何建议将不胜感激。

//更新：发布详细代码以进行澄清 我的场景是这样的： - ContactController 填充联系人列表 - 用户单击联系人或单击添加新联系人 - 联系人控制器将显示 ngDialog - 用户更新联系人详细信息并按保存然后 ngController 回调 Contactcontroller 并且 contactController 将更新列表。 我只是希望能够在不使用 $scope 混乱的情况下将 this.newContact 传递给 ngDialog!!

这是我针对上述场景的控制器代码：

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);

}

这是我的模板：

<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

您可以使用 data property:

将数据传递给 ngDialog

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.");
        }
    });
}

我不确定您为什么不需要使用 result.closePromise，但知道这一点也很好。

模板：

<input id="id" name="Id" ng-model="ngDialogData.newContact.Id" type="text" placeholder="Id" ng-disabled="true" class="form-control input-md">

将数据从调用控制器传递到 ngDialog 的最佳方法 - 检查我的代码

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

typescript

ng-dialog

controlleras