带指令的角度重复 [英] angular ng-repeat with directive
问题描述
我是新的角和有以下问题,我需要帮助。
我正在使用角度图指令 http://jtblin.github.io/angular -chart.js / 构建图表板。我得到了以下的情况:
i'm new to angular and have the following issue where i need assistence. I'm using angular charts directives http://jtblin.github.io/angular-chart.js/ to build a chart board. I got the follwoing scenario:
我有一个指令一个视图和一个用户代码在这里关联控制器。
在控制器内应该有一个数组图表[],它保存对象。
这些对象应该与chart伪指令双向绑定。
什么是适当的方式这样做?我将动态绘制我的图表,没有任何控制器连接到每个图表。可能吗?
I have a directive a view and anenter code here associated controller. Inside the controller there should be an array charts[] which holds objects. these objects should be two-way binded with the chart directive. What is the appropriate way to do so? I will bild my charts dynamically without any controller attached to each chart. Is that possible?
<div ng-repeat="c in charts">
<chart></chart>
<div>
reportViewController.js
reportViewController.js
angular.module('app').controller('reportViewController', reportViewCtrl);
reportViewCtrl.$inject = ['$scope', '$log', 'RefinerService', 'appConfig'];
function reportViewCtrl($scope, $log, RefinerService, appConfig) {
$scope.charts = [];
var chart = {
ID: 1
, Visible: true
, Type: "chart-line"
, Data: [
[65, 59, 80, 81, 56, 55, 40]
, [28, 48, 40, 19, 86, 27, 90]
]
, Labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012']
, Series: ['Product A', 'Product B']
}
$scope.charts.push(chart);
}
chartTemplate.html
chartTemplate.html
<div class="chart-container" flex>
<canvas class="chart {{c.Type}}"
data="{{c.Data}}"
labels="{{c.Labels}}"
series="{{c.Series}}">
</canvas>
</div>
directive.js
directive.js
angular.module('app').directive('chart', function () {
return {
restrict: 'E',
templateUrl: 'templates/chartTemplate.html',
scope: {
id: '@id',
type: '@type'
}
};
});
cheers philipp
help would be appreciated! cheers philipp
推荐答案
编辑:Final fiddle显示工作示例,与OP协作 - https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview
Final fiddle showing working example, in collaboration with OP - https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview
您需要将ng-repeat中的c传递到图表指令。
You need to pass the "c" from the ng-repeat into the chart directive.
这里是一个小提琴演示: http://jsfiddle.net/8zwmt18L/1/
Here is a fiddle to demonstrate: http://jsfiddle.net/8zwmt18L/1/
< div ng-repeat =c in charts>
< chart chart-data =c>< / chart>
< div>
在您的指示中:
code> angular.module('app')。directive('chart',function(){
return {
restrict:'E',
templateUrl:'templates / chartTemplate .html',
scope:{
chartData:'='
}
};
});
angular.module('app').directive('chart', function () {
return {
restrict: 'E',
templateUrl: 'templates/chartTemplate.html',
scope: {
chartData: '='
}
};
});
在您的指令模板中:
< div class =chart-containerflex&
< canvas class =chart chart-base
chart-type =chartData.Type
data =chartData.Data
labels =chartData.Labels
series =chartData.Series>
< / canvas>
< / div>
在图表的数据中,您的类型需要为Line ,而不是chart-line或chart-bar
In the data for the charts, your types will need to be "Line" or "Bar", and not "chart-line" or "chart-bar"
这篇关于带指令的角度重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!