Question

我已经建立了一个显示1张单图（Amcharts）的指令..

angular.module("App").directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,

           template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
           link: function (scope, element, attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                   chart = AmCharts.makeChart("chartdiv", {
                "type": "serial",
                "theme": "light",
                "marginLeft": 20,
                "pathToImages": "http://www.amcharts.com/lib/3/images/",
                "dataProvider": [],
                "valueAxes": [{
                    "axisAlpha": 0,
                    "inside": true,
                    "position": "left",
                    "ignoreAxisWidth": true
                }]
            });                      
                };
                initChart();

         }//end watch           
       }
   }) ;

JSFiddle

现在我想要一个显示所有采用数据源和类型的图表的指令。例如：<my-directive type="3dCylinder" source="data"></my-directive>

Answer 1

您需要使用隔离范围接受指令中的输入：

 scope: {
          type: '@',
          source: '=',
          chartId: '@'
       }

并在您的链接函数中使用此范围变量，如scope.source，scope.type等。

HTML

 <my-elem chart-id="chart-1" source="data" type="serial"></my-elem> 
<my-elem chart-id="chart-2" source="data1" type="serial"></my-elem>

在http://jsfiddle.net/LbqjLvLp/6/检查这个工作jsfiddle （注意：我已将角度版本更新为1.5.0）

Answer 2

在回报中添加如下内容：

scope:{
    type:"=",
    source:"="
}

它应该与您编写的html一起使用。在指令的链接部分，您可以通过编写scope.type和scope.source来访问它。

Angular JS Amcharts指令

2 个答案: