javascript - Angular JS Controller 功能未进入

Question

我试图简单地通过 GET 调用将一些 JSON 数据扔到页面上。

这是我的 HTML(请注意，它已加载到具有正确 Angular 符号的 index.html 中):

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

这是下载 Controller :

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

我已经调试了该应用程序，它确实命中了self.routes，但它只是跳过了它并且没有显示任何数据。

我在控制台中也没有收到任何错误。它只是跳过该函数。

这是我的第一个 AngularJS 应用程序。

Answer 1

你的代码组织不好，错误驻留在 View 中，因为它没有调用方法 self.routes，它只是打印出来...

你的 View 必须做类似的事情:

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

};