AngularJS-ng repeat-在子http请求中使用父repeat数据

我对AngularJS似乎有一个简单的问题——如果是的话，我道歉。我是新来的，到处都找遍了，找不到我想做什么的答案

基本上，我有一个$http请求，它从服务器获取一个“卡片”列表，然后我使用ng repeat在HTML中构建该列表。然后，我想用一些“指标”填充这些卡片，这些指标也是从服务器检索到的。我有一个用于“卡片”父母的控制器和一个用于“度量”孩子的单独控制器

我的问题是，在发出子$http请求时，我无法确定如何引用父“卡”的ID

下面是我正在使用的HTML和JS-欢迎提供任何帮助：

HTML:

谢谢大家!

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

{{Dashboard.DashboardCards} {{Card.CardDisplayName}} 这是一个id父项：{Card.cardd} {{MetricItem.MetricDisplayName}

---

你能为我们简化一下吗？删除所有不匹配的代码感谢您的及时回复。对不起，我已经删除了HTML。我认为JS中的所有内容都是必需的。不知道您的卡片结构我猜是card.id还是card.cardd？您真的可以发布您的仪表板jsonIt的card.cardd吗？谢谢您使用嵌套控制器的原因是什么？指令可能更合适，请记住ng repeat会创建子作用域谢谢。当我尝试这样做时，我得到两个错误：TypeError:无法读取未定义TypeError的属性'set'：无法读取未定义TypeError的属性'get'。现在试试！越来越近-错误现在未知提供商：CardProvider同样，我不确定我需要把什么放在你放的地方-我假设一些参考当前卡ID，但不确定如何参考-如果我是傻瓜，我道歉！在id值传递引用中，引用父“卡”的id。现在看看例子

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

    }]);

})();

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