AngularJS - NG-重複 - 用孩子的HTTP請求父重複數據

Question

我有什麼似乎是一個簡單的問題，AngularJS - 如果是這樣的道歉。我是新來的，已經搜遍遍地，無法完全找到我想要做的事情的答案。

基本上我有一個是我從中再使用NG-重複建設的HTML服務器得到「卡」列表的$ HTTP請求。然後，我想用一些「度量標準」來填充這些卡片 - 也從服務器中檢索。我有一個'卡'（父母）的控制器和'度量'（兒童）的單獨控制器。

我的問題是，我無法工作，如何讓孩子$ HTTP請求時，引用父「卡」的ID。

下面是HTML & JS，我使用 - 任何幫助將appriciated：

---

HTML：

<div class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard"> 

    <div ng-repeat="Card in Dashboard.DashboardCards"> 

     <div class="DashboardCard card"> 
      {{Card.CardDisplayName}} 

      <div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric"> 
       <div ng-repeat="Metric in Metric.DashboardMetrics"> 
        {{Metric.MetricDisplayName}} 
       </div> 
      </div> 

     </div> 

    </div> 

---

JS：

(function() { 
    var app = angular.module('OtterDashboard', [ ]); 

    app.controller('DahsboardCardController', [ '$http', function($http) { 

     //Declare a varaible for the data 
     var DashboardCards = this; 

     //Set the varaiable to an empty array to receive the data 
     DashboardCards.DashboardCards = [ ]; 

     $http({ 
      //Request the data 
      method: 'GET', 
      dataType: 'jsonp', 
      url: '/api.svc/tbl_Card', 
      useDefaultXhrHeader: false, 
      headers: {'Content-type': 'application/json'}, 
      headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'}, 
      crossDomain: true, 
     }).then(function successCallback(data) { 
      //The data was sucessfully received, populate the variable with it 
      DashboardCards.DashboardCards = data.data.d.results; 
     }, function errorCallback(response) { 
      //There was an error 
      console.log('Card data could not be retrieved'); 
     }); 

    }]); 

    app.controller('DahsboardMetricController', ['$http', function($http, Card) { 

     //Declare a varaible for the data 
     var DashboardMetrics = this; 

     //Set the varaiable to an empty array to receive the data 
     DashboardMetrics.DashboardMetrics = [ ]; 

     $http({ 
      //Request the data 
      method: 'GET', 
      dataType: 'jsonp', 
      url: '/api.svc/DashboardMetric?Card=%27' + **???reference to parent card ID???** + '%27', 
      useDefaultXhrHeader: false, 
       headers: {'Content-type': 'application/json'}, 
       headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'}, 
       crossDomain: true, 
     }).then(function successCallback(data) { 
      //The data was sucessfully received, populate the variable with it 
      DashboardMetrics.DashboardMetrics = data.data.d.results; 
     }, function errorCallback(response) { 
      //There was an error 
      console.log('Metric data could not be retrieved'); 
     }); 

    }]); 

})(); 

---

謝謝！

Answer 1

EDIT 1

使用服務控制器之間共享變量。看例如：

app.controller('DahsboardCardController', ['$http', function($http, $sharedResource) { 
     var DashboardCards = this; 
     DashboardCards.DashboardCards = [ ]; 

     $http({ 
      method: 'GET', 
      dataType: 'jsonp', 
      url: '/api.svc/tbl_Card', 
      useDefaultXhrHeader: false, 
      headers: {'Content-type': 'application/json'}, 
      headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'}, 
      crossDomain: true, 
     }).then(function successCallback(data) { 
      DashboardCards.DashboardCards = data.data.d.results; 
      $sharedResource.set("id", "<pass id value>"); 

     }, function errorCallback(response) { 
      console.log('Card data could not be retrieved'); 
     }); 
    }]); 

app.controller('DahsboardMetricController', ['$http', function($http, Card, $sharedResource) { 
     var DashboardMetrics = this; 

     DashboardMetrics.DashboardMetrics = []; 

     $http({ 
      method: 'GET', 
      dataType: 'jsonp', 
      url: '/api.svc/DashboardMetric?Card=%27' + $sharedResource.get("id") + '%27', 
      useDefaultXhrHeader: false, 
      headers: {'Content-type': 'application/json'}, 
      headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'}, 
      crossDomain: true, 
     }).then(function successCallback(data) { 
      DashboardMetrics.DashboardMetrics = data.data.d.results; 
     }, function errorCallback(response) { 
      console.log('Metric data could not be retrieved'); 
     }); 
    }]); 

    app.factory('$sharedResource', function() { 
     var property = {}; 

     return { 
      get: function (key) { 
       return property[key]; 
      }, 
      set: function(key, value) { 
       property[key] = value; 
      } 
     }; 
    }); 

編輯2

當與angularjs工作被recomended用於打印對象一個對象在表中。爲什麼這是一個美麗的S2。

看這個例子。幫助您發展。使用示例函數通過parentId中的加載（CardId）。該功能將在頁面加載中運行。

我太修復代碼的HTML。您在輸入字段之前使用了別名控制器。

var app = angular.module("App", []); 
 

 
app.controller('DahsboardCardController', ['$scope', function($scope) { 
 
     $scope.DashboardCards = [{ 
 
      CardId: "111", 
 
      CardDisplayName: "Card 1" 
 
     }, { 
 
      CardId: "222", 
 
      CardDisplayName: "Card 2" 
 
     }, { 
 
      CardId: "333", 
 
      CardDisplayName: "Card 3" 
 
     }]; 
 
    } 
 
]); 
 

 
app.controller('DahsboardMetricController', ['$scope', function($scope) { 
 
     $scope.load = function(CardIdParent) { 
 
      console.log(CardIdParent); 
 
     }; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="App" class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard"> 
 
    {{Dashboard.DashboardCards}} 
 
    <div ng-repeat="Card in DashboardCards"> 
 
     <div class="DashboardCard card"> 
 
      {{Card.CardDisplayName}} 
 
      <div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric" ng-init="load(Card.CardId)"> 
 
       This a id parent: {{Card.CardId}} 
 
       <div ng-repeat="MetricItem in DashboardMetrics"> 
 
        {{MetricItem.MetricDisplayName}} 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>