[英]How can I use an angular component more then once?
I am using angular component to load dynamic charts into my widget: 我正在使用角度组件将动态图表加载到我的小部件中:
Here is a example of my component: 这是我的组件的一个示例:
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
}]
})
}
});
This renders a pie chart on the widget. 这将在小部件上呈现一个饼图。 This is how my json object looks likes:
这就是我的json对象的样子:
{
"Id":0,
"description":"Test1",
"datasource":"Data",
"charttype":"Pie",
"x":0,
"y":0,
"width":3,
"height":2
},
This is going good. 一切顺利。 But when I want to make another widget with a pie chart it doesn't render the pie chart anymore.
但是,当我想用饼图制作另一个小部件时,它不再呈现饼图。
Array with two widgets objects: 具有两个小部件对象的数组:
[
{
"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
}
]
On index.html 在index.html上
<div ng-switch-when="Pie">
<chart-pie></chart-pie>
</div>
The widgets: 小部件:
How can I use the component more then once? 我如何才能多次使用该组件?
Kind regards 亲切的问候
The $('.Pie')
selector is too general and will pick up every element with that class in the whole document. $('.Pie')
选择器过于笼统,它将在整个文档中使用该类的每个元素。
Inject $element
into the controller and only search for .Pie
within your component element: 将
$element
注入控制器,并仅在您的component元素中搜索.Pie
:
angular.module("generalApp").component("chartPie", {
template: "<div class=Pie></div>",
bindings: {
data: "=",
},
controller: function ($element) {
$element.find('.Pie').highcharts({
// ...
})
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.