带指令的角度ng-repeat

Question

我是棱角分明的新手，并且在需要帮助的地方有以下问题。 我正在使用角度图表指令http://jtblin.github.io/angular-chart.js/来构建图表板。我得到了以下情况：

我有一个指令视图和这里的关联控制器。 在控制器内部应该有一个数组chart []来保存对象。 这些对象应与图表指令双向绑定。 这样做的适当方法是什么？我将动态地生成我的图表，而不会在每个图表上附加任何控制器。这可能吗？

reportView.html

<div ng-repeat="c in charts">
<chart></chart>
<div>

reportViewController.js

angular.module('app').controller('reportViewController', reportViewCtrl);

reportViewCtrl.$inject = ['$scope', '$log', 'RefinerService', 'appConfig'];


function reportViewCtrl($scope, $log, RefinerService, appConfig) {
    $scope.charts = [];
    var chart = {
                ID: 1
                , Visible: true
                , Type: "chart-line"
                , Data: [
                    [65, 59, 80, 81, 56, 55, 40]
                    , [28, 48, 40, 19, 86, 27, 90]
                ]
                    , Labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012']
                    , Series: ['Product A', 'Product B']

    }
    $scope.charts.push(chart);
}

chartTemplate.html

<div class="chart-container" flex>
<canvas class="chart {{c.Type}}" 
  data="{{c.Data}}" 
  labels="{{c.Labels}}" 
  series="{{c.Series}}">
</canvas>
</div>

directive.js

angular.module('app').directive('chart', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/chartTemplate.html',
        scope: {
            id: '@id',
            type: '@type'
        }
    };
});

帮助将不胜感激！欢呼菲律宾

Answer 1

编辑：与OP合作展示工作示例的最后小提琴 - https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

你需要传递＆＃34; c＆＃34;从ng-repeat到图表指令。

这是一个小提示：http://jsfiddle.net/8zwmt18L/1/

<div ng-repeat="c in charts">
<chart chart-data="c"></chart>
<div>

在你的指令中：

angular.module('app').directive('chart', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/chartTemplate.html',
        scope: {
            chartData: '='
        }
    };
});

在您的指令模板中：

<div class="chart-container" flex>
<canvas class="chart chart-base" 
  chart-type="chartData.Type"
  data="chartData.Data" 
  labels="chartData.Labels" 
  series="chartData.Series">
</canvas>
</div>

在图表的数据中，您的类型需要是＆＃34; Line＆＃34;或＆＃34; Bar＆＃34;，而不是＆＃34;图表线＆＃34;或＆＃34;图表栏＆＃34;