Question

我正在使用角度组件将动态图表加载到我的小部件中：

以下是我的组件示例：

angular.module("generalApp").component("chartPie", {
template: "<div class=Pie></div>",
bindings: {
    data: "=",
},
controller: function () {
    $('.Pie').highcharts({
        title: {
            text: 'Pie point CSS'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            type: 'pie',
            allowPointSelect: true,
            keys: ['name', 'y', 'selected', 'sliced'],
            data: [
                ['Apples', 29.9, false],
                ['Pears', 71.5, false],
                ['Oranges', 106.4, false],
                ['Plums', 129.2, false],
                ['Bananas', 144.0, false],
                ['Peaches', 176.0, false],
                ['Prunes', 135.6, true, true],
                ['Avocados', 148.5, false]
            ],
            showInLegend: true
        }]
    })
}
});

这会在窗口小部件上呈现饼图。这就是我的json对象看起来像：

{  
     "Id":0,
     "description":"Test1",
     "datasource":"Data",
     "charttype":"Pie",
     "x":0,
     "y":0,
     "width":3,
     "height":2
},

这很好。但是当我想用饼图创建另一个小部件时，它不再呈现饼图。

包含两个小部件对象的数组：

[
    {  
        "Id":0,
        "description":"Test1",
        "datasource":"Data",
        "charttype":"Pie",
        "x":0,
        "y":0,
        "width":3,
        "height":2
    },
    {  
        "Id":0,
        "description":"Test2",
        "datasource":"Data",
        "charttype":"Pie",
        "x":3,
        "y":0,
        "width":3,
        "height":2
    }
]

在index.html上

<div ng-switch-when="Pie">
   <chart-pie></chart-pie>
 </div>

小部件：

如何再次使用该组件？

亲切的问候

Answer 1

$('.Pie')选择器过于笼统，将在整个文档中获取该类的所有元素。

将$element注入控制器，仅搜索组件元素中的.Pie：

angular.module("generalApp").component("chartPie", {
    template: "<div class=Pie></div>",
    bindings: {
        data: "=",
    },
    controller: function ($element) {
        $element.find('.Pie').highcharts({
            // ...
        })
    }
});

如何使用角度分量一次？

1 个答案: