0

私は ng-Dialog で Angular / Typescript を使用しています。この段階で、ng-Dialog はテンプレートを希望どおりに正しく表示しています。ただし、データは表示されません。シナリオは次のとおりです。すべての連絡先リストを表示する詳細ページがあります。ユーザーが連絡先をクリックすると、ContactController.selectRecord 関数が呼び出され、選択された行のインデックスが渡されます。この関数は、指定された連絡先を見つけて、ダイアログをポップします (この段階まで、データを含めてすべてが機能しています)。ただし、ダイアログがポップされると、値は表示されません。コードは次のとおりです (コードは簡潔にするためにトリミングされています)。

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

}

_MaintainContat.Html のコードは次のとおりです (簡潔にするためにトリミングされています)。

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

私は ng-dialog ie controller: this または controller: "ContactController"、controllerAs: "ContactController as VM" または controllerAs: "VM" の多くのオプションを試しましたが、どれも機能しません。

欠けているビットについて誰か教えてください。コメントをお待ちしております。

次のステップは、更新されたデータを _MaintainContat.Html から ContactController に渡すことです。

どんな助けでも大歓迎です。

どうもありがとう

4

1 に答える 1

0

わかりました、ようやく機能しました。解決策は、ngDialog のスコープを設定することでした。

 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
        });
    }
于 2015-11-06T10:15:41.160 に答える