AngularJs-画布上的图表未在ng-repeat中呈现

Question

I am using charts which work well in canvas :-

<canvas id="canvas_HorizontalBar3" height="170" width="600"></canvas>
<canvas id="canvas_HorizontalBar1" height="170" width="600"></canvas>

But when i started using angular in my application & wanted to generate canvas dynamically. Only the 1st chart gets displayed, the second one shows blank.

<div gridster>
                    <ul>
                        <li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
                            <div class="box" ng-controller="CustomWidgetCtrl">
                                <div ng-if="widget.canvas === 'canvas_HorizontalBar3'">
                                    <canvas id="canvas_HorizontalBar3" height="170" width="600"></canvas>
                                </div>
                                <div ng-if="widget.canvas === 'canvas_HorizontalBar1'">
                                    <canvas id="canvas_HorizontalBar1" height="170" width="600"></canvas>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

$scope.dashboards = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 1,
                    sizeY: 1,
                    sizeX: 3,
                    name: "Employee Count By Category",
                    canvas: "canvas_HorizontalBar3"
                }, {
                    col: 3,
                    row: 1,
                    sizeY: 1,
                    sizeX: 3,
                    name: "Employee Count By Department",
                    canvas: "canvas_HorizontalBar1"
                }]
            }
        };

Any idea how to solve this?

I populate charts with AJAX call :-

jq.ajax({
            type: 'GET',
            url: '/Dashboard/getDepartmentChart',
            async: true,
            success: function (data) {
....
}

Answer 1

Your sample code may have been simplified just for illustration, but in this case you can assign the id using variable

<canvas ng-attr-id="{{widget.canvas}}" height="170" width="600"></canvas>

By the way you can use $http() (recommended) instead of $.ajax , or you'll have to manually call $scope.$apply() after you get the data.