一页中的同一组件多次使用angularjs应用程序中的标识符

Question

我有一个angularjs应用程序。在这一部分中，我有一个显示图的组件。因此，在组件的父组件中，我接收到数据并将其传递给子组件。但是在此页面中，我可以多次使用相同的组件，但使用不同的数据。但是我总是在同一个变量中传递数据。因此，所有数据都存储在最后创建的组件中。

我试图在组件初始化时将数据复制到另一个变量中，但是它不起作用。

这是我父母的模板：

...
<div id="main{{tab.comparisonId}}" class="graphsContainerComparison">
                            <!-- placeholder for graphs -->
                            <ul class="graphsList">
                                <li ng-if="tab.selectedGraphs.length !== 0 && tab.selectedGraphs.indexOf('barGraphDurationEnergy') !== -1" class="component">
                                    <bar-graph-duration-energy
                                        bar-graph-duration-energy-data="listJobsViewCtrl.barGraphDurationEnergyData"
                                        selected-tab="listJobsViewCtrl.selectedTab"
                                        remove-graph="listJobsViewCtrl.removeGraph">
                                    </bar-graph-duration-energy>
                                </li>
                            </ul>
                        </div>
...

所以我可以有很多barGraphDurationEnergy组件。

这是我的组件：

.component('barGraphDurationEnergy', {
    templateUrl: 'widgets/listJobs/themes/base/views/components/barGraphDurationEnergy.html',
    bindings: {
        barGraphDurationEnergyData: '<',
        selectedTab: '<',
        removeGraph: '='
    },
    controller: require('./components/barGraphDurationEnergy/barGraphDurationEnergy-component.js'),
    controllerAs: 'barGraphDurationEnergyCtrl'
})

这是我组件的初始化：

this.$onInit = function () {
    widgetCtrl.selectedTab.loadingBarGraphDurationEnergy = true;
    widgetCtrl.selectedTab2 = angular.copy(widgetCtrl.selectedTab);
    widgetCtrl.comparisonId = angular.copy(widgetCtrl.selectedTab.comparisonId);
    var main = $('#main' + widgetCtrl.comparisonId);
    var width = main.width();
    var height = main.height();
    $timeout(function () {
        var loaderContainerDiv = $('#loaderContainerDiv_' + widgetCtrl.comparisonId);
        loaderContainerDiv.width(width - 5);
        loaderContainerDiv.height(height);
    });
};

因此，我一直在考虑使用angular.copy(...)可以保留comparisonId，因为我有一个副本，因此如果父级的副本更改了，则此副本不会更改，但是每次创建了新组件，每个组件的comparisonId等于最后一个组件。

我需要它，因为每次显示数据更改（来自父级）时，我都需要知道我们位于哪个组件上，并像这样显示数据：

 $('#containerBarGraphDurationEnergy_' + widgetCtrl.comparisonId).highcharts(widgetCtrl.barGraphDurationEnergy);

所以我需要comparisonId才能在页面中找到该组件。

那么您是否知道如何为每个组件保留comparisonId，所以实际上我如何在同一页面中多次拥有相同的组件，并且每个组件都有一个标识符？