根据上一页中选择的名称获取 Json 详细信息（Angular）

Question

我在获取 json 数据时遇到问题，具体取决于在其他 HTML 页面上选择的值，不同的控制器服务于不同的页面

我的主页由循环通过 json 数据的表组成

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Phone</th>
            <th>Time</th>       
          </tr>

        </thead>
        <tbody>
          <tr ng-repeat = 'row in rows'>
          <td><a href="#about/{{row.name}}">{{row.name}}</a></td>
          <td>{{ row.phone}}</td>
          <td>{{row.time}} </td>    
          </tr>

        </tbody>
      </table>

并根据从表中选择的名称，通过$routeParams 将其路由到显示所选人员姓名的不同页面，但我也想从该 json 中获取该人的其他详细信息

http://plnkr.co/edit/iha3M0KThZegme8yKRz9?p=preview

非常感谢任何帮助

Answer 1

您必须以某种方式在第二页中获取该数据。您有几个按我的偏好顺序列出的选项

1. 创建一个服务来进行 http 调用，然后缓存 Json 并将其注入到两个控制器中。
2. 让持有整个 JSON 的控制器控制不同类型的页面。
3. 在另一个控制器中进行另一个 http 调用，以便您可以访问 json。

Answer 2

服务就是您要寻找的。这是反映添加服务的代码：

    // create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about/:person', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

});

scotchApp.service('dataService', function($http) {

  var dataService = {
    getData: function() {
      return $http.get("call_queue.json");
    }
  };

  return dataService;
});


// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope, dataService) {
  // create a message to display in our view
  $scope.message = 'contacts';
  dataService.getData().then(function(response) {
    $scope.rows = response.data
  });
});

scotchApp.controller('aboutController', function($scope, $routeParams, dataService) {
  $scope.message = 'Clicked person name from home page is dispalyed here, but wanted other datails also';
  $scope.person = $routeParams.person;
  dataService.getData().then(function(response) {
    $scope.rows = response.data
  });
});

您可以决定是否要在每次访问您的服务时进行 $http.get() 调用，或者您可以进行一次调用并将服务中的数据缓存在您公开的变量中。