2017-04-02 10 views
1

シンプルなSPAを書き込もうとしています。平均を使用します。角度1 - ルーティングとapi

ノード経由のAPIがすべて動作しています。

は私のメインコントローラ

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


boardingApp.config(function($routeProvider) { 


    $routeProvider 

     // route for the home page that lists all tenants 
     .when('/', { 
      templateUrl : 'js/templates/tenants.html', 
      controller : 'tenantsController' 
     }) 
     // route for a specifc tenant 
     .when('/tenant/:id', { 
      templateUrl : 'js/templates/tenant.html', 
      controller : 'tenantController' 
     }) 

}); 

boardingApp.controller('tenantsController', ['$scope','$http','$log', function($scope, $http,$log) { 

     $http.get(URL + "/api/tenants") 
      .then(function(response){ $scope.details = response.data; }); 

}]); 

boardingApp.controller('tenantController', ['$scope','$http','$location','$log', function($scope, $http, $location, $log) { 



     if ($location.search().hasOwnProperty('id')) { 
      var myid = $location.search()['id']; 
      console.log(myid) 

      myURL = URL + "/api/tenants/"+myid 
      console.log(myURL) 

      $http.get(myURL) 
      .then(function(response){ $scope.tenant = response.data; }); 
      console.log($scope.tenant) 
     } 

}]); 

boardingApp.controller('readmeController', function($scope, $http) { 

     $scope.message = "This is the message" 


}); 

ルートルート仕事が見つかったAPIは、テーブルを作成する呼び出すにルートを設定しています。すべての良い

、そのテンプレートの主要部分は、この

<tbody id="tenantsTable"> 
         <tr ng:repeat = "tenant in details | filter : true: tenant.activeTenant "> 
         <td><a ng-href = "#/tenant.html?id={{tenant._id}}" >View</td> 
         <td>{{tenant.roomNumber}} </td> 
         <td>{{tenant.firstName}} </td> 
         <td>{{tenant.lastName}} </td> 
         <td>{{tenant.paymentFrequency}} </td> 
         <td>${{tenant.rentAmount}} </td> 
         <td> {{tenant.leaseEnd | date: 'dd MMM yyyy'}} </td> 
         </tr> 

         </tbody> 

である私は、「表示」リンクをクリックすると、ちょうどテナントIDを必要とするコールを通って、APIテナントごとにDBからデータを取得したいです - 標準的なもの。

コントローラが要求を受け取っていないため、テナントページのリンクをクリックすると空白になります。

私はここで何が欠けていますか? API呼び出しsはすべての良いと作業している細かい

答えて

0

あなたアンカータブが間違っている、それはまたあなたが$routeParams.id APIの代わりを使用してtenantController内部ルートのパラメータを取得する必要があり"#/tenant/{{tenant._id}}"

ng-href="#/tenant/{{tenant._id}}" 

のように正しいパターンにする必要があります$location.search()これはクエリパラメータを探します。

+0

ありがとうございました..これを長らく注視していました。 $ routeParamsを調べる必要があるでしょうか? –

+0

@ScottSはコントローラに '$ routeParams'を注入し、' $ routerParams.id'を実行するとパラメータ値を取得します ' –

関連する問題