角JS控制器功能沒有進入

Question

我試圖簡單地將一些JSON數據從GET調用扔到頁面上。

這是我的HTML（請注意，這是裝入的index.html具有正確的角符號）：

<h1>Downloads</h1> 
<div class="container" ng-controller="DownloadCtrl as download"> 
    <p>{{download.routes}}</p> 
</div> 

這是下載控制器：

(function(){ 
    'use strict'; 

    angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl); 
    DownloadCtrl.$inject= ['DownloadService']; 

    function DownloadCtrl(DownloadService){ 
    var self = this; 
    self.routes = function(){ 
     DownloadService.getRoutes() 
     .then(function(responseData) { 
      self.routes = responseData;   
     }); 
    }; 
    }; 
})(); 

這是下載服務：

(function(){ 
    'use strict'; 

    angular.module('dashboardApp') 
    .factory('DownloadService', DownloadService); 

    DownloadService.$inject = ['$http', '$sessionStorage']; 

    var baseURL = 'http://localhost:8080/Dashboard/rest/download/'; 

    function DownloadService ($http, $sessionStorage){ 
    var service = {}; 
    service.getRoutes = getRoutes; 
    return service; 

    function getRoutes(){ 
     return $http.get(baseURL+"route",$sessionStorage.sessionData.sessionID); 
    } 
    } 
})(); 

我有調試d的應用程序，它確實打到self.routes但是它只是跳過它，並沒有數據顯示。

我也沒有收到控制檯中的任何錯誤。它只是跳過功能。

這是我的第一個AngularJS應用程序。

Answer 1

你的代碼是壞的組織， 錯誤駐留在視圖，因爲它沒有調用方法self.routes，它只是打印出...

您的視圖必須做這樣的事情：

<p>{{download.routes()}}</p> 

但是，這是一個糟糕的方式代碼... 請，可考慮做這樣的事情：

DownloadService 
 
    .getRoutes() 
 
    .then(function(responseData){ 
 
    self.routes = responseData;   
 
    }) 
 
; 
 

 
// instead of 
 

 
self.routes = function(){ 
 

 
    DownloadService.getRoutes() 
 
    .then(function(responseData){ 
 
    self.routes = responseData;   
 
    }); 
 

 
};