how to make custom directive or pass variable in directive in angular js

Question

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

here is my angular code. 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?

Pankaj Parkar · Accepted Answer · 2015-06-29 17:38:00Z

2

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.

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

edited Jun 29, 2015 at 17:38

answered Jun 29, 2015 at 17:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user944513 Over a year ago

could you please send plunker ?

Pankaj Parkar Over a year ago

@user944513 give me a few minutes

Pankaj Parkar Over a year ago

@user944513 on the way to create it dude..give me 2 mins

Collectives™ on Stack Overflow

how to make custom directive or pass variable in directive in angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related