如何在角js中实现自定义指令或传递变量指令?

I am trying to make bar chart in angular .I am able to make in jquery (using highchart.js file).This is link which I am able to make in jquery code http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?p=preview .I am getting the correct output.But the same thing I need to show using angularjs using directive .So I try to make directive .My issue is how I will pass my parameter in directive

我尝试用角度来制作条形图。我可以用jquery(使用highchart)制作。js文件)。我可以用jquery代码http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?我得到了正确的输出。但同样的事情，我需要用angularjs使用指令，所以我试着做指令，我的问题是如何在指令中传递参数

here is my angular code. http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue

这是我的角码。http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue

// Code goes here

angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope) {

}).directive('chartTest',function(){
  return {
    restrict: 'E',
    scope:{

    },
    link :function(scope, element, attrs){
      element.highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: chart_title
        },
        xAxis: {
            categories: xAxisarry
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: names[0],
            data: janeData
        }, {
            name: names[1],
            data: joneData
        }]
    });
    }


  }

});

I want it look like same as in jquery ? can we pass variable in directive using scope?

我想让它看起来和jquery一样?我们可以用作用域在指令中传递变量吗?

1 个解决方案

#1

You need to pass the parameters from the isolated scope of your directive, and then inside your directive you need to use $ on directive element to make highcharts method available.

您需要从您的指令的隔离范围中传递参数，然后在您的指令中，您需要使用$ on指令元素来使highcharts方法可用。

Markup

标记

<chart-test chart-title="chartTitle" x-axisarry="xAxisarry" 
y-axis="yAxis" json-data="janeData" names="names"></chart-test>

Controller

控制器

.controller('MainCtrl', function($scope) {
    $scope.chartTitle = "";
    $scope.xAxisarry = ['Apples', 'Bananas', 'Oranges'];
    $scope.yAxis = 'Fruit eaten';
    $scope.data = {
      jane: [1, 0, 4],
      jone: [5, 7, 3]
    };
    $scope.names = ["jane", "jone"];

})

Directive

指令

.directive('chartTest', function() {
    return {
      restrict: 'E',
      scope: {
        chartTitle: '=',
        xAxisarry: '=',
        yAxis: '=',
        jsonData: '=',
        names: '='
      },
      link: function(scope, element, attrs) {
        $(element).highcharts({
          chart: {
            type: 'bar'
          },
          title: {
            text: scope.chartTitle
          },
          xAxis: {
            categories: scope.xAxisarry
          },
          yAxis: {
            title: {text: 'Fruit eaten'}
          },
          series: [{
            name: scope.names[0],
            data: scope.jsonData['jane']
          }, {
            name: scope.names[1],
            data: scope.jsonData['jone']
          }]
        });
      }
    }
});

Working Plunkr

工作Plunkr

#1