2015-11-04 426 views
0

我正在使用Angular/Typescript和ng-Dialog。在這個階段,ng-Dialog以我想要的方式正確顯示模板。但是,沒有顯示數據。情況是這樣的:我有一個顯示所有聯繫人列表的詳細信息頁面。用戶點擊一個聯繫人,它調用ContactController.selectRecord函數並傳遞選定行的索引。這個函數找到指定的聯繫人並彈出對話框(到目前爲止所有的工作都包括數據在內)。但是,彈出對話框時,不顯示值。該代碼是如下(代碼已被修整爲簡潔起見):Angular和ngDialog問題,雖然對話框顯示正確,但數據未顯示

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對話框的許多選項,即controller:this或controller:「ContactController」,controllerAs:「ContactController as VM」,甚至是controllerAs:「VM」,但它們都不起作用。

任何人都可以讓我知道關於缺少的一點。任何意見將不勝感激。

下一步是將更新的數據從_MaintainContat.Html傳回給ContactController。

任何幫助將不勝感激。

非常感謝

回答

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