AngularJS нг-повтор: Динамически визуализации/связывание холста внутри цикла

Question

Относительно нового в мир AngularJS, наслаждаясь его до сих пор.
Однако, я борюсь с моей попыткой перебрать записи в моей БД и визуализации <canvas> для каждого из них.

Скажите это мои данные (укороченный для краткости):

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

, который загружается в контроллер на заводе:

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

Я хотел перебрать каждую запись и построить a <canvas>, затем передать этот элемент <canvas> другому объекту (Grid) с data в качестве аргумента, который создает контекст и рисует на нем <canvas> на основе данных.

Простой, не так ли? К сожалению, я не понимаю, как это сделать, и у меня нет языка, на котором можно задать более острый вопрос.
Я думаю, что проблемы существуют в том, что я использую встроенные шаблоны, которые еще не отображаются.

Это, как правило, подход, который я сейчас пытаюсь:

HTML:

<div ng-repeat="painting in paintings" some-directive-maybe="bindCanvas(painting._id)"> 
    <canvas id="{{ painting._id }}" width="800" height="400"></canvas> 
</div> 

JS:

app.controller('PaintingCtrl', [ 
    '$scope', 
    function($scope) { 
     $scope.bindCanvas(canvasId) { 
      var grid = new Grid(document.getElementById(canvasId)); 
      // Have fun with grid 
     } 
    } 
]); 

Помоги мне, StackOverflow. У вас есть единственная надежда ...

Answer 1

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

картины должны быть в array.

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" } 
      ]; 

     } 
    ]); 

Update:

Я создал 2 plunkers.

Во-первых, plunker просто создает canvas элементы с staticwidth и height. Количество canvas элементов, созданных основан на ряде картин в painting.json файле.

Во-вторых, plunker идет на шаг дальше и создает canvas элементы с dynamicwidth и height. Количество canvas элементов, созданных основан на ряде картин в painting.json файле. Здесь width и height основаны на data собственности в paintings.json файле.

Надеюсь, это поможет.

Answer 2

После кода также работает для повторного графика на той же странице.

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

Добавить ниже код в JS файл

$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] 
      }] 
     }, 
    }); 
}