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

Question

我使用的图表在画布上效果很好：-

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

但是，当我开始在应用程序中使用angular并想动态生成canvas 。 仅显示第一个图表，第二个显示空白。

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

任何想法如何解决这个问题？

我用AJAX调用填充图表：

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

Answer 1

您的示例代码可能已被简化，仅用于说明目的，但是在这种情况下，您可以使用变量分配ID

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

顺便说一下，您可以使用$http() （推荐）代替$.ajax ，或者在获取数据后必须手动调用$scope.$apply() 。