带指令的角度 ng-repeat [英] angular ng-repeat with directive

问题描述

我是 angular 的新手，在需要帮助时遇到以下问题.我正在使用角度图表指令 http://jtblin.github.io/angular-chart.js/ 构建图表板.我得到了以下场景:

我有一个指令，一个视图和一个与控制器相关的代码.在控制器内部应该有一个保存对象的数组 charts[].这些对象应该与图表指令双向绑定.这样做的适当方法是什么?我将动态显示我的图表，而无需在每个图表上附加任何控制器.这可能吗?

reportView.html

<图表></chart><div>

reportViewController.js

angular.module('app').controller('reportViewController', reportViewCtrl);reportViewCtrl.$inject = ['$scope', '$log', 'RefinerService', 'appConfig'];函数 reportViewCtrl($scope, $log, RefinerService, appConfig) {$scope.charts = [];无功图表 = {编号:1，可见:真, 类型:图表线"， 数据: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], 标签: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], 系列: ['产品 A', '产品 B']}$scope.charts.push(chart);}

chartTemplate.html

<canvas class="chart {{c.Type}}"数据="{{c.Data}}"标签="{{c.Labels}}"系列="{{c.Series}}"></画布>

directive.js

angular.module('app').directive('chart', function () {返回 {限制:'E'，templateUrl: 'templates/chartTemplate.html',范围: {id: '@id',类型:'@type'}};});

帮助将不胜感激！欢呼菲利普

解决方案

与 OP 合作展示工作示例的最终小提琴 - https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

您需要将 ng-repeat 中的c"传递到图表指令中.

这是一个演示:http://jsfiddle.net/8zwmt18L/1/

<chart chart-data="c"></chart><div>

在您的指令中:

angular.module('app').directive('chart', function () {返回 {限制:'E'，templateUrl: 'templates/chartTemplate.html',范围: {图表数据:'='}};});

在您的指令模板中:

<canvas class="chart chart-base"图表类型="chartData.Type"数据=图表数据.数据"标签=图表数据.标签"series="chartData.Series"></画布>

在图表数据中，您的类型需要是Line"或Bar"，而不是chart-line"或chart-bar"

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:

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?

reportView.html

<div ng-repeat="c in charts">
<chart></chart>
<div>

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

<div class="chart-container" flex>
<canvas class="chart {{c.Type}}" 
  data="{{c.Data}}" 
  labels="{{c.Labels}}" 
  series="{{c.Series}}">
</canvas>
</div>

directive.js

angular.module('app').directive('chart', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/chartTemplate.html',
        scope: {
            id: '@id',
            type: '@type'
        }
    };
});

help would be appreciated! cheers philipp

解决方案

Edit: Final fiddle showing working example, in collaboration with OP - https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

You need to pass the "c" from the ng-repeat into the chart directive.

Here is a fiddle to demonstrate: http://jsfiddle.net/8zwmt18L/1/

<div ng-repeat="c in charts">
<chart chart-data="c"></chart>
<div>

In your directive:

angular.module('app').directive('chart', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/chartTemplate.html',
        scope: {
            chartData: '='
        }
    };
});

In your directive template:

<div class="chart-container" flex>
<canvas class="chart chart-base" 
  chart-type="chartData.Type"
  data="chartData.Data" 
  labels="chartData.Labels" 
  series="chartData.Series">
</canvas>
</div>

In the data for the charts, your types will need to be "Line" or "Bar", and not "chart-line" or "chart-bar"

这篇关于带指令的角度 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！