Javascript AngularJS ng repeat：动态渲染/绑定循环内的画布

对AngularJS的世界来说相对较新，到目前为止还很享受。
然而，我正在努力尝试循环数据库中的条目，并为每个条目呈现一个

假设这是我的数据（为简洁起见缩短）：

由工厂加载到控制器中：

app.factory('paintings', ['$http', function($http) {
    var o = {
        paintings: []
    };
    o.getAll = function() {
        return $http.get('/paintings')
            .success(function(data) {
                angular.copy(data, o.paintings);
            });
    }
    return o;
}]);

我想循环遍历每个条目并构造一个

元素，然后将该

元素传递给另一个对象（

网格

），并将

数据作为参数，该参数创建上下文并基于数据绘制该
。

简单，对吗？不幸的是，我不知道该怎么做，也没有语言来提出更尖锐的问题。
我认为问题存在于我使用的是尚未呈现的内联模板这一事实上

这通常是我目前正在尝试的方法：

HTML:

帮帮我，斯塔克。你是我唯一的希望

var paintings = [
    { "_id" : ObjectId("31c75"), "data" : "0,0,0,0" },
    { "_id" : ObjectId("deadb"), "data" : "1,3,0,255" }
]; 

绘画应该在
阵列中

 app.controller('PaintingCtrl', [
        '$scope',
        function($scope) {
            $scope.bindCanvas(canvasId) {
                var grid = new Grid(document.getElementById(canvasId));
                // Have fun with grid
            }
            //paintings should be on scope for ng-repeat to find it.
            // If ng-repeat does not find paintings on scope then it will create a new empty paintings object on scope
            $scope.paintings = [ 
              { _id : "31c75", data : "0,0,0,0" },
              { _id : "deadb", data : "1,3,0,255" }
             ];

        }
    ]);

更新：

我已经创造了2个掠夺者

首先，只需使用
静态
宽度
和
高度
创建
画布
元素。创建的
canvas
元素的数量基于
painting.json
文件中的绘画数量

其次，更进一步，创建具有
动态
宽度
和
高度
的
画布
元素。创建的
canvas
元素的数量基于
painting.json
文件中的绘画数量。这里的
width
和
height
基于
paints.json
文件中的
data
属性

希望这有帮助。
以下代码也适用于同一页面上的重复图表

<div ng-repeat="a in abc">
    <canvas id="pieChart{{a}}" ng-bind = "bindCanvas(a)" ></canvas>
<div>

您的绘画对象是否像$scope.paints一样定义在scope上？@RaviTeja：我认为应该由我最近编辑中包含的工厂复制到$scope。我已经更新了我的答案。看看，哎呀，我打错了。它是一个数组，由工厂加载到$scope中。我将编辑我的问题。我应该为这样的任务制定指令吗？谢谢！你的劫掠帮我得到了它！
var paintings = [
    { "_id" : ObjectId("31c75"), "data" : "0,0,0,0" },
    { "_id" : ObjectId("deadb"), "data" : "1,3,0,255" }
]; 

 app.controller('PaintingCtrl', [
        '$scope',
        function($scope) {
            $scope.bindCanvas(canvasId) {
                var grid = new Grid(document.getElementById(canvasId));
                // Have fun with grid
            }
            //paintings should be on scope for ng-repeat to find it.
            // If ng-repeat does not find paintings on scope then it will create a new empty paintings object on scope
            $scope.paintings = [ 
              { _id : "31c75", data : "0,0,0,0" },
              { _id : "deadb", data : "1,3,0,255" }
             ];

        }
    ]);

<div ng-repeat="a in abc">
    <canvas id="pieChart{{a}}" ng-bind = "bindCanvas(a)" ></canvas>
<div>

$scope.abc = [1,2,3];

$scope.bindCanvas = function(i) {
    var ctx = document.getElementById("pieChart"+i);
    new Chart(ctx,{
        type: 'pie',
        data: {
            labels: ["Tele-conference", "Projector", "Laptop", "Desktop", "Coffee-machine"],
            datasets: [{
                label: "Population (millions)",
                backgroundColor: ["red", "green","blue","violet","yellow"],
                data: [200,100,300,400,150]
            }]
        },
    });
}