AngularJS Typescript控制器值不更新頁面

Question

我第一次選擇Angular並且來自.NET背景感覺使用typescript更舒適。

我遇到了一個問題，當控制器使用從服務接收的對象填充控制器值時，似乎無法在頁面上更新值。我可能只是在做一個noob錯誤。

任何人都可以指出我做錯了什麼。

所以我的打字稿是

module ConnectAdmin.Interfaces { 
    export interface ITemplate { 
     templateId: number; 
     name: string; 
     description: string; 
    } 
} 

module ConnectAdmin.Interfaces { 
    export interface ITemplateCollection { 
     total: number; 
     set: number; 
     skipped: number; 
     collection: Array<ITemplate>; 
    } 
} 

module ConnectAdmin.Controllers { 
    import TemplateCollection = Interfaces.ITemplateCollection; 

    export class TemplateIndexController { 
     static $inject = ["ConnectAdmin.Services.TemplateService"]; 

     constructor(templateService: ConnectAdmin.Services.TemplateService) { 
      this.defaultTemplates = { skipped: 0, set: 0, total: 0, collection: [] }; 
      this.templates = this.defaultTemplates; 
      this.processing = true; 
      this.store = this; 

      templateService.index(this.take, this.skip, this.successCallback, this.errorCallback); 

      this.processing = false; 
     } 

     successCallback(data: TemplateCollection) { 
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] } 
      this.templates = data; 
      alert(this.templates.collection.length); 
     } 

     errorCallback(response: any) { 
      this.templates = this.defaultTemplates; 
      alert(response.status); 
      this.message = "An Error Occurred Contacting the API"; 
     } 

     processing: boolean; 

     store = this; 

     defaultTemplates: TemplateCollection; 
     templates: TemplateCollection; 

     take = 20; 
     skip = 0; 
     message: string; 
    } 

    angular.module("ConnectAdmin").controller("ConnectAdmin.Controllers.TemplateIndexController", TemplateIndexController); 
} 

module ConnectAdmin.Services { 
    import TemplateCollection = Interfaces.ITemplateCollection; 
    import TemplateIndexController = Controllers.TemplateIndexController; 

    export class TemplateService { 
     constructor($http: ng.IHttpService) { 
      this.http = $http; 
     } 

     http: ng.IHttpService; 

     index(take: number, skip: number, successCallback: Function, errorCallback: Function) { 
      const req = { 
       method: "GET", 
       url: "https://localhost:44336/api/Templates?take=" + take + "&skip=" + skip, 
       headers: { 
        "Content-Type": "application/json", 
        "Accept": "application/json" 
       } 
      }; 

      this.http(req).then(response => { 
        successCallback(response.data); 
       }, 
       response => { 
        errorCallback(response); 
       }); 

      //return { total: 1, skipped: 0, set: 1, collection: [{ templateId: 1, name: "Template 1", description: "" }] }; 
     } 
    } 

    angular.module("ConnectAdmin").service("ConnectAdmin.Services.TemplateService", TemplateService); 
} 

與我的HTML之中：

<div id="template-index"> 
<div class="row"> 
    <div class="col-sm-12"> 
     <div class="info-box"> 
      <div class="info-box-title"> 
       Templates 
      </div> 
      <div class="info-box-content" ng-controller="ConnectAdmin.Controllers.TemplateIndexController as templateCtrl"> 
       <table class="table table-striped table-responsive"> 
        <thead> 
        <tr> 
         <td>#</td> 
         <td>Name</td> 
         <td>Description</td> 
        </tr> 
        </thead> 
        <tbody> 
        <tr class="tr-select" ng-click="templateCtrl.openTemplate(template.templateId)" ng-repeat="template in templateCtrl.templates.collection"> 
         <td>{{template.templateId}}</td> 
         <td>{{template.name}}</td> 
         <td>{{template.description}}</td> 
        </tr> 
        </tbody> 
       </table> 
       <div id="template-index-loader" class="loader" ng-show="templateCtrl.processing"></div> 
       <div class="info-box-footnote" ng-hide="templateCtrl.templates.collection.length"> 
        Displaying {{templateCtrl.templates.skipped + 1}} to {{templateCtrl.templates.set + templateCtrl.templates.skipped}} of {{templateCtrl.templates.total}} 
       </div> 
       <div class="info-box-footnote" ng-show="templateCtrl.message.length"> 
        {{templateCtrl.message}} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我不認爲它的HTTP調用因爲我沒有得到任何更新，如果我返回一個硬編碼目的。

成功回調中的警報給了我一個正確的值。

感謝

Answer 1

我的直覺是你的範圍在你的成功回調被改變。嘗試使用您在構造函數中定義這樣

successCallback(data: TemplateCollection) { 
     store.templates = { skipped: 0, set: 0, total: 0, collection: [] } 
     store.templates = data; 
     alert(store.templates.collection.length); 
    } 

否則，我認爲當你說你的控制範圍，「這個」你指的是successCallback功能

Answer 2

阿大的範圍！謝謝，你讓我走上正軌。

做更新你說我得到intellisense promts說你的意思是this.store哪個有相同的結果。

繼續從那裏做一點挖掘是的所有變量都是未定義的。

我已經更新了控制器和服務是：

module ConnectAdmin.Controllers { 
    import TemplateCollection = Interfaces.ITemplateCollection; 

    export interface ITemplateIndexScope extends ng.IScope { 
     vm: any; 
    } 

    export class TemplateIndexController { 
     static $inject = ["ConnectAdmin.Services.TemplateService"]; 

     constructor(templateService: ConnectAdmin.Services.TemplateService) {    
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] };       
      this.templateService = templateService; 
      this.take = 20; 
      this.skip = 0; 
      this.refresh(); 
     } 

     refresh() { 
      this.processing = true; 
      this.templateService.index(this.take, this.skip, this);    
     } 

     successCallback(data: TemplateCollection) {       
      this.templates = data;    
      alert(this.templates.collection.length); 
      this.processing = false; 
     } 

     errorCallback(response: any) { 
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] }; 
      alert(response.status); 
      this.message = "An Error Occurred Contacting the API"; 
      this.processing = false; 
     } 

     processing: boolean; 
     templates: TemplateCollection; 
     take: number; 
     skip: number; 
     message: string; 
     templateService: Services.TemplateService; 
    } 

    angular.module("ConnectAdmin").controller("ConnectAdmin.Controllers.TemplateIndexController", TemplateIndexController); 
} 

module ConnectAdmin.Services { 
    import TemplateCollection = Interfaces.ITemplateCollection; 
    import TemplateIndexController = Controllers.TemplateIndexController; 

    export class TemplateService { 
     constructor($http: ng.IHttpService) { 
      this.http = $http; 
     } 

     http: ng.IHttpService; 

     index(take: number, skip: number, templateController: TemplateIndexController) { 
      const req = { 
       method: "GET", 
       url: "https://localhost:44336/api/Templates?take=" + take + "&skip=" + skip, 
       headers: { 
        "Content-Type": "application/json", 
        "Accept": "application/json" 
       } 
      }; 

      this.http(req).then(response => { 
        var data = response.data as TemplateCollection; 
        templateController.successCallback(data); 
       }, 
       response => { 
        templateController.errorCallback(response); 
       }); 
     } 
    } 

    angular.module("ConnectAdmin").service("ConnectAdmin.Services.TemplateService", TemplateService); 
} 

所以我通過控制器的實例到服務，而不是回調函數。

乾杯