Javascript 对象未从离子服务正确返回

背景：我正在做一个关于纽约地铁的简单的爱奥尼亚项目。我使用的是爱奥尼亚的“标签”模板，我有一个标签，上面列出了所有的路线及其符号（1、2、3、a、C、E等），用户应该能够点击其中列出的任何路线，并进入详细信息页面（有点像启动新爱奥尼亚项目时在标签模板中设置“聊天/聊天详细信息”）

问题是我似乎无法获取Route Detail页面来加载有关所选路由的信息。像

{{route.name}}

和

{{{route.desc}}

这样的表达式都是空的

routes.json文件（示例，在

www/js/routes.json

下归档）：

app.js：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

// ...

.state("tab.routes", {
  url: "/routes",
  views: {
    "tab-routes": {
      templateUrl: "templates/tab-routes.html",
      controller: "RoutesCtrl"
    }
  }
})
  .state("tab.route-detail", {
    url: "/routes/:id",
    views: {
      "tab-routes": {
        templateUrl: "templates/route-detail.html",
        controller: "RouteDetailCtrl"
      }
    }
  });

controllers.js：

angular.module('starter.controllers', [])

// ...

/* This one works perfectly */
.controller('RoutesCtrl', function($scope, $http) {
  $http.get("js/routes.json").then(function(response) {
    $scope.routes = response.data.routes;

    console.log($scope.routes);
  });
})

/* This one does NOT work */
/* $stateParams.id returns the correct value, but $scope.route
        does not store the Route returned from the service (null) */
.controller("RouteDetailCtrl", function($scope, $stateParams, Routes) {
  $scope.route = Routes.getRoute($stateParams.id);
})

services.js：

angular.module('starter.services', [])

/* This is the problem */
.factory("Routes", function($http) {
  return {
    getRoute: function(id) {
      return $http.get("js/routes.json").then(function(response) {
        var routes = response.data.routes;

        for(var i = 0; i < routes.length; i++) {
          if(parseInt(id) === parseInt(routes[i].id)) {
            return routes[i];
          }
        }

        return null;
      })
    }
  }
})

---

问题不在于routes对象，因为相同的代码在

RoutesCtrl

中工作正常，而在于您在

RouteDetailCtrl

中处理响应的方式。

Route

服务返回的响应不是原始javascript值，而是承诺，您需要正确处理承诺才能得到响应：

.controller("RouteDetailCtrl", function($scope, $stateParams, Routes) {
   Routes.getRoute($stateParams.id)
     .then(function (response) {
        $scope.route = response;
     });
})

<ion-view view-title="{{route.name}}">
    <ion-content class="padding">

        <h2>{{route.name}}</h2>
        <h2>{{route.desc}}</h2>

        <p>This is the detail page.</p>

    </ion-content>
</ion-view>

.controller("RouteDetailCtrl", function($scope, $stateParams, Routes) {
   Routes.getRoute($stateParams.id)
     .then(function (response) {
        $scope.route = response;
     });
})